scss语法：用scss的理由

这是我参与更文挑战的第30天，活动详情查看： 更文挑战

预编译

相信学习过一段时间css的小伙伴，都不会对css的预编译器sass感到陌生，有点类似编程语言，但实际上是提供了一些有效的处理方法，有效减轻css的开发负担，提升开发效率，增加开发愉悦度。

先说说怎么对预编译器进行监听编译。

比较友好的有现成的软件，比如官方推荐的koala。

有逼格一点的是通过命令行监听实时编译。这里推荐一篇我之前写的文章。 就不过多展开了。

但无论是用现成的软件还是命令的形式，都是监听指定文件或者文件夹，编译成指定文件或指定文件夹。html文件中正常引用编译后的css文件即可。

多说一句，sass和scss虽然看起来差不多，但是语法还有一点点差别的。下面是语法差别。

// sass
.div
   .son
      width: 20px;
      height: 20px;

// scss
.div{
  .son{
    width: 20px;
    height: 20px;
  }
}
复制代码

可以根据个人喜好选择sass或scss，最终编译出来没有差别。

下面进入主题

变量与嵌套

$blue : #1875e7;　
$red: #f00;

div {
    color : $blue;
    .son {
        background-color: #red;
    }
}
复制代码

变量的存在可以将一些常用的样式或者尺寸存储，方便统一管理，但是需要对网页全局做到心里有数才能比较好的使用变量。

另外支持的层级嵌套，让css的层级更加轻易，也能避免全局样式污染。

临时起意去用的话，容易造成变量的泛滥。还是需要谨慎的。但是可以考虑仅在通用尺寸以及主要颜色存储为变量。

循环@for @while

学到了js的小伙伴肯定对for循环很熟悉吧，轻松应对重复工作，这里预编译器也提供了通用的方法。

@for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
}

$i: 1;
@while $i < 10 {
    .border-#{$i} { border: #{$1}px solid blue; }
    $i: $i + 1;
}

// after
.border-1{ border: 1px solid blue; }
/* ... */
.border-10{ border: 10px solid blue; }
复制代码

for循环输出， @for声明这是一个for循环，$i则是当前可用的值， from 1 to 10 表示从1到10，执行10次。

while循环，在上面先声明一个变量$i 初始值为1， 之后进行编译，只要$i小于10，就会一直循环，所以在里面要自增1。

继承 @extend

.border-1 { border: 1px solid blue; }
.box {
    @extend .border-1;
    font-size:120%;
}
// after
.box{
    border: 1px solid blue;
    font-size: 120%;
}
复制代码

继承的效果与一个html元素使用多个类名来拼凑样式的效果是一样的。

混合@mixin

@mixin border {
    border: 1px solid blue;
}
.box{
    @include border;
}
复制代码

混合的作用于继承类似，区别在于，继承适用于刚好有一个写好的，所以拿过来用。混合则是专门写好一个特定的样式功能，之后需要的地方拿来用， 例如写好了一个flex两端对齐，或者一个绝对居中。

条件判断 @if

@mixin name($i){
    @if $i == 1{
        color: #red;
    } @else {
        color: blue;
    }
}
.box{
  @include name(1);
}
// after
.box{ color: #red; }
复制代码

经典的if判断， 这里写一个借用混合写一个模板，实际开发中，可以开动小脑筋，很多地方都能用得到。

函数

@function double($n){
    @return $n*2;
}
.box{
    width: double(2px);
}
// after
.box{
    width: 4px;
}
复制代码

合理的运用函数，能实现的远比这要多的，就看你的发挥了

结尾

扎实的css只是配合scss提供的这些方法，能实现很多有意思的动画之类的效果。

实际业务开发中，使用到的可能会比较少，但是混合、继承、函数是真的香，部分需要重复的地方使用@for循环也能大把节省时间。这样的好东西，你确定不试试？