Sass/Scss中rem的使用
在CSS中,实现px和rem转换非常简单,但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来便利,但终究有些烦人,也不是长远之计。另外,Google浏览器中文默认字体大小为12px。既然我们学习了Sass,就应该思考如何让Sass来帮助我们做这些计算的工作。接下来介绍如何使用Sass实现px和rem之间的计算。
根据rem的使用原理,可以知道px转rem需要在html根元素设置一个font-size值,因为rem是相对于html根元素。
方法一、Sass中@function中rem转px
$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义
html {
font-size: $browser-default-font-size;
}
@function pxTorem($px){//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}
定义好@function之后,实际使用中就简单多了:
//SCSS
html {
font-size: $browser-default-font-size;
}
.header {
font-size: pxTorem(12px);
}
//CSS
html {
font-size: 16px; }
.header {
font-size: 0.75rem; }
方法二、Sass中mixin实现rem转px
$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义
html {
font-size: $browser-default-font-size;
}
@mixin font-size($target){
font-size: $target;
font-size: ($target / $browser-default-font-size) * 1rem;
}
在实际使用中,可以通过@include调用定义好的@mixin font-size:
//SCSS
.footer {
@include font-size(12px);
}
//CSS
.footer {
font-size: 12px;
font-size: 0.75rem; }
可实际中,这个mixin太弱小了,根本无法实现我们需要的效果,因为我们很多样式属性中他可不只一个属性。为了实现多个属性能设置多值,就需要对mixin做出功能扩展:
@mixin remCalc($property, $values...) {
$max: length($values);//返回$values列表的长度值
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: strip-units(nth($values, $i));//返回$values列表中的第$i个值,并将单位值去掉
$browser-default-font-size: strip-units($browser-default-font-size);
$pxValues: #{$pxValues + $value * $browser-default-font-size}px;
@if $i < $max {
$pxValues: #{$pxValues + " "};
}
}
@for $i from 1 through $max {
$value: strip-units(nth($values, $i));
$remValues: #{$remValues + $value}rem;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
#{$property}: $pxValues;
#{$property}: $remValues;
}
在这个remCalc()中定义了两个参数 property和 values…。其中 property表示的是样式属性,而 values…表示一个或者多个属性值。
px转rem的mixin定义完成后,就可以通过@include来引用:
//SCSS
.wrapper {
@include remCalc(width,45);
@include remCalc(margin,1,.5,2,3);
}
//CSS
.wrapper {
width: 720px;
width: 45rem;
margin: 16px 8px 32px 48px;
margin: 1rem 0.5rem 2rem 3rem; }
在实际使用中取值有一点非常重要在remCalc()取的$values值为rem值。