Sass/Scss基础——rem与px的自动转换

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值。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值