Sass快速上手

Sass快速上手

前言

因使用Sass的地方越来越多，发现我们只是使用到了Sass的冰山一角，所以这里将其他实用的方法及案例列举出来，大家一起学习

特性概览

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

变量

变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。

使用案例（页面主要颜色辅辅颜色的定义）

$main-colors: #ff8c19;
$auxiliary-color: #00b6ff;

body {
  background: $main-colors;
  color: $auxiliary-color;
}

编译后

body {
  background: #ff8c19;
  color: #00b6ff;
}

嵌套

Sass允许开发人员以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护，因此是一种不好的实践。

使用案例（深度器选择）
把 .el-card 等样式类 /deep/ 选择器中使用，可读性更高，减少重复代码。

/deep/ {
    .el-card {
      transition: 0s;
    }
    .title-content .text-default {
      margin: 0;
    }
    .el-icon-warning {
      color: #ff8c19 !important;
      margin-right: 10px !important;
    }
}

编译后

/deep/.el-card {
  transition: 0s;
}
/deep/.title-content .text-default {
  margin: 0;
}
/deep/.el-icon-warning {
  color: #ff8c19 !important;
  margin-right: 10px !important;
}

引入

Sass能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（_partial.scss），Sass会通过这些下划线来辨别哪些文件是Sass片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入。CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，而SASS的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。下面例子中的代码，将会在base.scss文件当中引入_reset.scss片断。

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

混合（方法）

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。

使用案例 （设置圆角）

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

编译后

.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
}

继承

通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：

// 下面代码会正常输出到生成的CSS文件，因为它被下面的代码所继承。
%flex-styles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 这段代码不会生成CSS，因为它没有被任何代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success-item {
  @extend %flex-styles;
}

编译后

.success-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

嵌套规则

Sass允许CSS规则嵌套使用，父子规则将会呈现包含选择器的关系：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
/deep/ {
    .el-button {
        color: #fff
    }
    .el-form {
        color: #fff
    }
    .el-dialog {
        color: #fff
    }
}

编译后

#main p {
    color: #00ff00;
    width: 97%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}


/deep/.el-button {
    color: #fff
}
/deep/.el-form {
    color: #fff
}
/deep/.el-dialog {
    color: #fff
}

引用父级选择器&

Sass使用$关键字在CSS规则中引用父级选择器，例如在嵌套使用伪类选择器的场景下：

.el-tag {
    &-success {
        background:#67c23a;
    }
    &-info {
        background:#909399;
    }
    &-warning {
        background:#e6a23c;
    }
}

编译后

.el-tag-success {
    background:#67c23a;
}
.el-tag-info {
    background:#909399;
}
.el-tag-warning {
    background:#e6a23c;
}

& 进阶用法

当父级选择器列表不存在的时候，&运算符的值为null，使用mixin当中可以通过该特性判断父选择器列表是否存在。

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: blue;
    }
  }
}

插值 #{}

开发人员可以通过插值（interpolation） #{} 在选择器和属性名称中使用 SassScript 变量。

$name: uinika;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

// 编译后
p.uinika {
  border-color: blue;
}

还可以使用 #{} 将 SassScript 放入属性值，大多数情况下这种方式并不优于变量，但是使用 #{} 意味着其附近的任意操作都将被视为普通 CSS，例如：

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

// 编译后
p {
  font: 12px/30px;
}