scss预处理器

scss是sass3.0之后的称呼

scss主要功能嵌套、变量、函数、混入

1.嵌套

.box{
    width:300px;
    height:300px;
    p{
          color:red
     }
    &.desc{
          font-size:16px;
     }
}

2.变量

$red = #ff0000
$fontSize = 16px
.box{
    width:300px;
    height:300px;
    p{
          color:$red 
     }
    &.desc{
          font-size:$fontSize;
     }
}

注：sass、scss定义变量用$，less定义变量用@

3.函数

@function doublePx($px){
    @return $px *2 + px
}
$titleSize:doublePx(16)

4.混入

@mixin important-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
}
//使用定义的mixin
p {
  @include important-text
}

适应移动端不同屏幕尺寸，通过计算html的font-size

(function (doc, win) {
     var docEl = doc.documentElement,
     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
     recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
          docEl.style.fontSize = (clientWidth / 10) + 'px';
         };
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

基准数也就是html，的 font-size有关:设计稿大小为750,转变就是拿设计稿的实际距离除以基准数 $rem乘以基数
基准数$rem:75;
/除了字体或者特殊要求需要用到的/
@function px2rem($px){
@return ($px/$rem)*1rem;
}

举个例子：假如设计稿有一个100*100的图片。则在经过px2rem(100)转换后为1.333rem，由于根html的fontsize会随着设备大小变化，

• 在iphone6/7/8中fontSize为37.5px，那么图片的显示大小为1.333*37.5。
• 在iphone6/7/8 plus中的fontSize为41.4px，那么图片的显示大小为1.333*41.4。

常用的mixin方法

针对字体

/*针对字体，根据屏幕的不同dpr设置不同的px，round为取整函数*/
@mixin px2px($name, $px) {
  #{$name}: round($px / 2) * 1px;
  [data-dpr="2"] & {
      #{$name}: $px * 1px;
  }
  [data-dpr="2.5"] & {
      #{$name}: round($px * 2.5 / 2) * 1px;
  }
  [data-dpr="2.75"] & {
      #{$name}: round($px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      #{$name}: round($px / 2 * 3) * 1px
  }
  [data-dpr="4"] & {
      #{$name}: $px * 2px;
  }
}
/*使用该mixin */
p{
    @include px2px(font-size,30)
}

图片媒体查询

@mixin retina($url) {
    background-image: url($url+ '.png');
    [data-dpr="2"] & {
        background-image: url($url+ '@2x.png');
    }
    [data-dpr="3"] & {
        background-image: url($url+ '@3x.png');
    }
}

多行文字省略号

@mixin clamp($num) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
}

background-size rem数值转换

@mixin bg_size_rem($x:auto,$y:auto) {
    @if $x==auto{
        $x:auto;
        } @else {
        $x:px2rem($x);
    }
    @if $y==auto{
        $y:auto;
    } @else {
        $y:px2rem($y);
    }
    background-size: ($x, $y);
}

background-size px数值转换

@mixin bg_size_px($x:auto,$y:auto) {
    @if $x==auto{
        $x:auto;
    } @else {
        $x:px2rem($x);
    }
    @if $y==auto{
        $y:auto;
    } @else {
        $y:px2rem($y);
    }
    background-size: ($x, $y);
}