CSS预处理器之SCSS

前言

传统的CSS代码在书写的时候不具有类似JavaScript语言提供了灵活的变量，封装函数等方式来解决同一系列的问题，这样会导致很多重复或者很相似的样式需要来回书写，导致冗余代码过多，下面我举个简单的例子给大家体会一下。

上面两套代码都想实现同一个效果，即使用flex布局划分一些区域。这边的demo由于很简单，所以从代码量上并不能很明显看出哪一个更方便。但是很明显就能发现CSS书写的那套代码有很多的冗余代码，一直书写冗余代码会使代码量剧增，最终谁都不想打开这个赖赖长的css文件，一打开整个人的心情就不好了，增加了维护的成本。

什么是预处理器

有了上面的对比后，接下来介绍一下我理解的预处理器概念。由于css的不灵活性，但又想达到像JavaScript那样灵活，就诞生了css的扩展，即预处理器。预处理器定义了一种新的语言，为css提供了编程特性，最终编译后，生成css文件。

什么时候用预处理器

复杂的CSS样式书写的时候更推荐使用预处理器

预处理器虽然可以解决一些冗余代码，但是如果样式很简单的话，还是推荐只使用scss中的&(父选择器)，对比css类的使用，scss提供的能使得结构与层级更清晰，一目了然。

SCSS语法介绍

变量定义： $变量名: 变量值(可以直接书写字符串而不必须用引号引起来)

数组定义：

$arr1: 1px 2px 3px 4px或者$arr1: 1px,2px,3px,4px(一维数组)

$arr2: 1px 2px,3px 4px或者(1px 2px)(3px 4px)(二维数组)

映射(类似JS中对象)：$map: (name: zhang)

插值语法(类似JS中${})： #{}

$name: test; $w: 200px; .#{$name} { width: $w }

and or not：分别对应JS中&& || !

!default：找到此变量后忽略，继续向上找。如果最终没找到或者值为空，再使用!default修饰的变量值

@import '文件路径': 导入scss文件

@extend：继承某个类下的样式(但如果选择器名称较多的时候，慎用)

如：.a .b .c .d { @extend .e }就可能会出现问题

三目表达式：

color: if(1 == 1, red, yellow)输出color： red

@if, @else if, @else

@if 1+1 == 2 { color: red; } @else if 1+1 == 3 { width: 3px; } @else { height: 20px; }

区别：if只能设置属性值，而@if等可以设置一些属性名和属性值

上面介绍完一些基本的定义和使用方法后，下面介绍如何从数组，对象中取值

for循环：

@for $var from start to end {}（不包含结尾）

@for $var from start through end {}（包含结尾）

start和end分别代表起始和结束的值，需要自行定义。

如：从1到9，from to只循环到8，而from through循环到9，$var就是每次循环的值

while循环：

@while 表达式 {}

each循环数组和对象：

@each $i in $list: 循环一维数组，$i就是每次循环的值，$list表示数组变量

@each $i, $j in $list: 循环二维数组或者对象

循环对象的时候：变量i代表键名，j代表键值

循环二维数组的时候：[[1, 2], [3, 4]](第一次i为1，j为2。第二次i为3，j为4)

混合mixin:

定义：@mixin 函数名(参数可不写，也可以定义默认值，也可以不定传参$a...) {}

使用： @include(可关键字传参，也可以普通传参)

关键词传参（类似对象解构赋值）

不定传参（当参数数量不固定时，可以使用不定参数）

向混合样式（@mixin）中导入内容，即可以将scss代码写进@include中，插入@mixin中@content的标记处，这样可以动态插入样式。

自定义函数： @function和@return和mixin传参一致

@function 函数名($变量名: 默认值) { @return $变量名 }

@mixin a {
  .app {
    @content; // 将@include的样式插入到@mixin中
  }
}

@include a {
  width: 100px;
  .box1 {
    background: red;
  }
}

// 编译结果
.app {
  width: 100px;
}
.app .box1 {
  background: red;
}

总结

在项目中复杂的样式需求下，使用预处理器太香了，你学会了嘛？如果有不懂的地方，请在下方评论留言，让我能更好地改进。本专栏意在把我所学的知识尽可能详细地表达出来，让更多小伙伴一起学习，共勉。

预言

由于疫情加上春节，好久没有发布文章了。在本专栏完结之后，后续会将这阶段所学的JS，webpack配置，axios等知识整理后发出来供大家参考学习，祝大家金三银四，生活愉快！