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等知识整理后发出来供大家参考学习,祝大家金三银四,生活愉快!