ruby – 如何从Sass mixin方程中删除测量单位?

前端之家收集整理的这篇文章主要介绍了ruby – 如何从Sass mixin方程中删除测量单位?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我写了一个非常简单的Sass mixin,用于将像素值转换为rem值(参见Jonathan Snook的 article on the benefits of using rems).这是代码
// Mixin Code
$base_font_size: 10; // 10px
@mixin rem($key,$px) {
  #{$key}: #{$px}px;
  #{$key}: #{$px/$base_font_size}rem;
}

// Include Syntax
p {
  @include rem(font-size,14);
}

// Rendered CSS
p {
  font-size: 14px;
  font-size: 1.4rem;
}

这个mixin工作得很好,但我对它的include语法有点不满意.看,我宁愿将像素值传递给include语句而不是简单的数字.这是一个小细节,但它会为当前不存在的include语句添加语义含义.这是我尝试将像素值传递给include语句时得到的结果:

// Include Syntax
p {
  @include rem(font-size,14px);
}

// Rendered CSS
p {
  font-size: 14pxpx;
  font-size: 1.4pxrem;
}

一旦Sass看到一个像素值传递给一个方程式,它就输出’px’.我想剥离该度量单位,就好像我在JavaScript中使用parseFloat或parseInt一样.如何在Sass mixin中这样做?

解决方法

从数字中删除单位是通过除法完成的,就像在代数中一样.
$base-font-size: 10px;
$rem-ratio: $base-font-size / 1rem;

@mixin rem($key,$px) {
  #{$key}: $px;
  #{$key}: $px/$rem-ratio;
}


// Include Syntax
p {
  @include rem(font-size,14px);
}

// Rendered CSS
p {
  font-size: 14px;
  font-size: 1.4rem;
}

Sass中的单位可以被视为真实的数学,所以px / px / rem只能用于rem.好好享受!

原文链接:https://www.f2er.com/ruby/267128.html

猜你在找的Ruby相关文章