scss的那些事儿

最近正在写一个vue的手机端demo，因为之前好像没有在意到手机端的边框像素问题，目前也正在使用scss，所以就这个问题，我想做一下scss的一个学习小汇总。
首先把边框像素问题解释一下，因为手机有不同的dpr(device pixel ratio )，也就是设备像素比，设备像素比 = 物理像素 / 逻辑像素(px)，物理像素则是在设备上真正的点，而逻辑像素是我们设置的css的值，由于像素比不同，可能我们原本设置的1px的边框，在像素比为2的情况下，就变成了2像素。那该如何解决呢？
主要是通过缩放来实现，解决方法如下

 $grey: #9f9fab;
.tab {
    width: 100%;
    height: 40px;
    line-height: 40px;
    @include border-1px($grey);
}

/* 实现移动端 1px , 根据不同 dpr 去缩放 */
@mixin border-1px($color) {
  position: relative;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    &::after {
      transform: scaleY(0.7);
      content: '';
      width: 100%;
      border-bottom: 1px solid $color;
      height: 1px;
      position: absolute;
      bottom: 0;
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    &::after {
      transform: scaleY(0.5);
      content: '';
      width: 100%;
      border-bottom: 1px solid $color;
      height: 1px;
      position: absolute;
      bottom: 0;
    }
  }
} 

mixin

mixin可以定义一个可以复用的代码段，还可以选择是否传参数

不带参数

 $lte7:true !default;//是否兼容ie6,7
 @mixin inline-block {
        display: inline-block; 
       @if $lte7 { 
              *display: inline;
               *zoom:1;
        } 
 } 
 $lte7:false; 
 @import 'mixin'; 
  .inline-block{
     @include inline-block; 
  }

带参数

如下代码

@mixin box-height($height){
    height:$heigth;
    left:20px;
}
//携带参数可以设置一个默认值,所以使用@include float;和@include float(left); 是同样的效果
@mixin float($float:left) {
    float: $float;
}
.text6N{
    @include box-height(100px);
} 
.fr{
 @include float(right) 
}
.fl{
 @include float
}

注：在mixin模块的定义中还可以包含其他的mixin；
当Mixins模块包含选择器和规则集，也就是mixins包含的内容本身就是有效的CSS样式时，他们就可以在其他规则集外被调用，如果没有选择器，那么编译后将不会有内容显示；
在给调用mixin模块给其传递参数时，便于理解，可以将参数名称和参数值一并传递过去。

数量可变的参数

如果想要给元素加多种阴影，且不确定几种

@mixin box-shadows($shadow...) {  
    box-shadow: $shadow;  
}
.container {  
    @include box-shadows(0px 1px 2px #333, 2px 3px 4px #ccc);  
}
 
 //
  @mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

以上简单讲述了一下mixin的用法，就会想到另外两个关键词：@extend 和 @function

extend

extend 和 minxin 都可以将代码块进行可复用化，不同的是mixin更为灵活，可以对其进行传参。
@extend 的作用是将重复使用的样式 延伸 给需要包含这个样式的特殊样式，允许延伸任何定义给单个元素的选择器。

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    //上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式
    ，这 样， 使用 .seriousError 的地方可以不再使用 .error。
    //其他使用到 .error 的样式也会同样继承给 .seriousError，例如，另一个样式 .error.intrusion 使用了 hacked.png 做背景，
    <div class="seriousError intrusion"> 也同样会使用 hacked.png 背景。
    .error.intrusion {
      background-image: url("/image/hacked.png");
    }

注：在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须延伸给相同指令层中的选择器。

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

其他

1、Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会。
2、如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。其中 #{} 插值语句可以在选择器或属性名中使用变量。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

3、如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。