预处理器之SCSS

170 阅读3分钟

CSS预处理器之SCSS

前言

  • 传统的CSS代码在书写的时候不具有类似JavaScript语言提供了灵活的变量,封装函数等方式来解决同一系列的问题,这样会导致很多重复或者很相似的样式需要来回书写,导致冗余代码过多,下面我举个简单的例子给大家体会一下。
  • 上面两套代码都想实现同一个效果,即使用flex布局划分一些区域。这边的demo由于很简单,所以从代码量上并不能很明显看出哪一个更方便。但是很明显就能发现CSS书写的那套代码有很多的冗余代码,一直书写冗余代码会使代码量剧增,最终谁都不想打开这个赖赖长的css文件,一打开整个人的心情就不好了,增加了维护的成本。

什么是预处理器

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

什么时候用预处理器

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

SCSS语法介绍

  1. 变量定义: $变量名: 变量值(可以直接书写字符串而不必须用引号引起来)
  2. 数组定义:
    • $arr1: 1px 2px 3px 4px或者$arr1: 1px,2px,3px,4px(一维数组)
    • $arr2: 1px 2px,3px 4px或者(1px 2px)(3px 4px)(二维数组)
  3. 映射(类似JS中对象):$map: (name: zhang)
  4. 插值语法(类似JS中${}): #{}
    • $name: test; $w: 200px; .#{$name} { width: $w }
  5. and or not:分别对应JS中&& || !
  6. !default:找到此变量后忽略,继续向上找。如果最终没找到或者值为空,再使用!default修饰的变量值
  7. @import '文件路径': 导入scss文件
  8. @extend:继承某个类下的样式(但如果选择器名称较多的时候,慎用)
    • 如:.a .b .c .d { @extend .e }就可能会出现问题
  9. 三目表达式:
    • 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等可以设置一些属性名和属性值
  • 上面介绍完一些基本的定义和使用方法后,下面介绍如何从数组,对象中取值
  1. for循环:
    • @for $var from start to end {}(不包含结尾)
    • @for $var from start through end {}(包含结尾)
    • start和end分别代表起始和结束的值,需要自行定义。
    • 如:从1到9,from to只循环到8,而from through循环到9,$var就是每次循环的值
  2. while循环:
    • @while 表达式 {}
  3. 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)
  4. 混合mixin:
    • 定义:@mixin 函数名(参数可不写,也可以定义默认值,也可以不定传参$a...) {}
    • 使用: @include(可关键字传参,也可以普通传参)
      • 关键词传参(类似对象解构赋值)
      • 不定传参(当参数数量不固定时,可以使用不定参数)
    • 向混合样式(@mixin)中导入内容,即可以将scss代码写进@include中,插入@mixin中@content的标记处,这样可以动态插入样式。
  5. 自定义函数: @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等知识整理后发出来供大家参考学习,祝大家金三银四,生活愉快!