SCSS 日常用法

官方文档

你需要了解的

less 和 sass 是两种 css 预编译语言，就是说通过 less 或者 scss 写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件，都能使用 变量、运算符、判断、方法等等。

scss 与 sass 的区别（这里先不讲 less ）：

• 先有的 sass 后有的 scss
• scss 需要大括号{}和分号;
• sass 什么都不用直接裸奔，通过缩进来区分代码等级，像 yaml 语言

初学者最好用 scss 而非 sass，sass 在你追求代码简洁的时候用，来看个对比

使用 scss 之前你需要准备的

最好用 JetBrains 系列软件（webStorm phpStorm IDEA等）开发，里面添加对于 scss 的 File Watcher 即可，在每次scss 文件改变的时候，程序都会自动编译 scss 到 css。

或者在 vue 单文件项目中直接在 中使用 scss，scss 本身就支持拆分成多文件，再通过 mixin 整合起来。

看个小例子

写一个.btn类并支持 :hover :active 样式

css

.btn {
/* btn 初始样式 */
}
.btn:hover{
/* :hover 样式 */
}
.btn:active{
/* :active 样式 */
}

SCSS

.btn{
// btn 初始样式
    &:hover{
        // hover 样式
    }
    &:active{
        // active 样式
    }
}

在 scss, sass,less中 & 都代指父类
上面这个例子中的 & 代指 .btn
可以看出 scss 的结构要比 css 清晰，并且写的也要更少。
下面的 scss 在使用中就会生成上面的 css。
而这还只是皮毛，保证你用过 scss 之后就不会再用 css写样式了。

一. 变量

变量是以 $ 开头的，像 js 的变量一样，scss 的变量也是有作用域的，也就是说内部声明的变量是无法在外面使用的，如果想让内部的变量在外部可访问，需要在变量值后面添加 !global 声明。（还可以通过添加 !default 给变量设置默认值，这个在写一个样式库的时候比较实用，避免别人在没有给变量赋值之前使用）

// Colors
$red:       #CD594B !global;
$yellow:    #F8CE5E;
$green:     #4B9E65;
$yellow:    #5A8DEE;

// Unites
$btn-padding: 4px;
$btn-lineheight: 26px;

实际使用中：
SCSS

.btn-success {
    background-color: $green;
    line-height: $btn-lineheight;
    color: #fff;
}

生成 css

.btn-success {
    background-color: #4B9E65;
    line-height: 26px;
    color: #fff;
}

在字符串中嵌入变量

将变量直接嵌入字符串，需要用 #{ 变量 }（类似 ES6 中模板字符串中的 ${ 变量 }）

其实 #{} 中是可以插入任意东西的，这里只用到了插入变量，还可以插入方法等等，高级用法。

SCSS

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

css

.card{
    background: url("./img/card-bg.png" center center);
}

二. 导入文件 @import

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

scss也有一个@import规则，但不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

通过 @import 可以把多个文件结合到一起
有了这个功能，就可以通过功能拆分 scss 文件，使其更结构化，比如，可以分成：变量类，按钮类，列表类，字体类，排版类等等。

三. 相互嵌入，扩展

1. @mixin @include

这个是最常用的，通过 @mixin 定义一个类或方法，在其它地方通过 @include引用这个方法或类。

如果是方法，还可以定义默认值

直接看例子
SCSS

// @mixin 如果没有调用，不会被渲染

@mixin rounded($conor: 5px){ // 定义 mixin 并设置默认值 5px
  -webkit-border-radius: $conor;
  -moz-border-radius: $conor;
  border-radius: $conor;
}

.btn-rounded{
  @include rounded(); // 这里引用上面的 mixin，默认值 5px
}

.btn-big-rounded{
  @include rounded(10px); // 这里引用上面的 mixin，并设置值 10px
}

生成 css

.btn-rounded{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.btn-big-rounded{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

2. @extend 继承

有些时候，需要写的某个类里，包含另一个类的所有声明。
如： 警告按钮，包含所有警告颜色类的内容。
scss

.danger{
  background-color: #FF3B30;
}
.round{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn{
  display: inline-block;
  padding: 3px 6px;
}

.btn-danger{
  @extend .danger, .round, .btn;
}

css

.danger, .btn-danger {
  background-color: #FF3B30;
}
.round, .btn-danger {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn, .btn-danger {
  display: inline-block;
  padding: 3px 6px;
}

@extend 注意事项：
不能继承 @extend .danger.text 这种连续组合的类，应该写为 @extend .danger, .text

四. @if @else, @each, @for 的使用

1. @if @else

呃，没什么说的，就是 if else 《官方文档：if else》

SCSS

@if $name == normal {   // 判断 $name 是否为 'normal'
  color: #333;          // 如果是，内部文字颜色为 #333
  border: 1px solid darken($color, 20%);
} @else {
  color: white;
  border: 1px solid darken($color, 5%);
}

2. @each

跟js 中的 Array.each(item=>{}) 一样，遍历变量所存在的所有数据。
比如下面的例子，会遍历$btn-styles 中的三个字符串

$btn-styles: "normal", "primary", "danger";

@each $type in $btn-styles {
  .btn-#{$type}{
    background-color: white;
  }
}

CSS

.btn-normal  { background-color: white; }
.btn-primary { background-color: white; }
.btn-danger  { background-color: white; }

3. @for

for 用于基于数字的遍历，有两种使用方法

• for $i from 1 to 10 从1到10，不包含10
• for $i from 1 through 10 从1到10，包含10

举个最常用的例子，生成 pb-1 pb-2… pb-8

SCSS

@for $gap from 1 through 8 {
  .pb-#{$gap} {
    padding-bottom: 10px * $gap;
  }
}

CSS

.pb-1 { padding-bottom: 10px; }
.pb-2 { padding-bottom: 20px; }
.pb-3 { padding-bottom: 30px; }
.pb-4 { padding-bottom: 40px; }
.pb-5 { padding-bottom: 50px; }
.pb-6 { padding-bottom: 60px; }
.pb-7 { padding-bottom: 70px; }
.pb-8 { padding-bottom: 80px; }

五. 方法 @function

方法以 @function开头，以 @return 结尾，也就是说，方法的定义，必须要有返回值

详见：https://sass-lang.com/documentation/at-rules/function

// 比较
$root: 14;

// 定义一个方法用于换算尺寸的方法
// #{} 是输出字符串的，上面有讲
@function size($size) {
  @return #{$size/$root}rem
}

.font-size-normal {
  font-size: size(16); 
}

得出来的CSS是这样的:

.font-size-normal {
  font-size: 1.1428571429rem;
}

六. 学习 scss 最好的例子

• Bootstrap v3 - less 语言: https://github.com/twbs/bootstrap/tree/v3-dev
• Bootstrap v4 - scss 语言: https://github.com/twbs/bootstrap

就是去看 bootstrap v4 的样式源码，bootstrap v4 就是用 scss 写的
下载 bootstrap 的 scss 源码，看里面怎么写的，进步很快的。