ruby – 如何从Sass mixin方程中删除测量单位?
发布时间:2020-12-16 21:38:47 所属栏目:百科 来源:网络整理
导读:我写了一个非常简单的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
我写了一个非常简单的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.好好享受! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |