前言

滴滴大佬：CSS预处理器有用过么？
我：嗯嗯，用过SASS的嵌套。
佬：没了？
我：...（尬住了）

不知道大家情况是不是和我一样，前车之鉴，CSS相关知识还是挺重要的。
本文带大家一起整理CSS预处理器知识点，现有流行库有Sass(Scss)、Less、Stylus等，我项目中主要还是用Sass, 所以本文例子都是以Sass(Scss)为基础。

Sass基础

CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。

变量

变量的提供，避免设计师频繁更改某一全局属性（比如整体颜色风格），导致我们被动增加工作量。
使用变量以$开头，有全局变量和局部变量。

$color: #8a8787; // 全局变量
div { 
  $width: 100px; // 局部变量
  width: $width;
  background: $color;
}
复制代码

若变量用在属性中，需要写在#{ }中

$side: left;
div { 
  border-#{$side}: 1px solid $color;
}
复制代码

嵌套

这应该是最熟悉的。??除了选择器可以嵌套，属性和伪类也可嵌套。

<div class="parent-container">
   <div class="parent-container-header"></div>
</div>
复制代码

.parent-container {
   &-header {  // 选择器嵌套
     background {
       color: red;   //属性嵌套
     }
     &:hover {  // 伪类嵌套
       color: green;
     }
   }
}
复制代码

继承

允许一个选择器，继承另一个选择器所有的属性。用@extend继承已存在的样式块。

.class1 {
  border: 1px solid #ddd;
}
.class2 {
  @extend .class1;
  font-size: 12px;
}
复制代码

混合

类似Vue的混入，是可以重用的样式代码，且可指定参数和默认值，运用@mixin使用如下。

@mixin left($value: 10px) {
  float: left;
  margin-left: $value;
}
div {
  @include left(4px);
}
复制代码

@import

用来引入外部样式文件

@import "文件相对路径"
复制代码

注释

有两种方式 /*注释*/和 //注释

颜色函数

内置颜色函数，便于生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
复制代码

Sass运算

加减乘除

Sass可以做各种数学计算(变量和属性)。加减需注意必须相同单位，除法需要带括号

$height: 10px;
div {
  width: 10px + 10px;
  height: $height + 10px;
  margin-top: 20px -10px;
  margin-left: 10px * 2;
  margin-right: (10px / 2);
}
复制代码

字符运算

运用+做拼接字符串

div:before {
 content: "hello" + "world";
}
复制代码

Sass命令

@if

和JS类似，可用于混入mixin，根据参数判断。

@mixin isHidden($bool: true) {
  @if $bool {
    display: block;
  }
  @else {
    display: none;
  }
}
复制代码

循环

可帮助生成类似选择器，如定义一些类似的外边距margin。有@for、@while、@each

@for $i from 1 to 10 {
  .margin-#{$i} {
    left: #{$i}px;
  }
}
复制代码

$i: 6;
while $i > 0 {
  .margin-#{$i} {
    left: #{$i}px;
  }
  $i: $i - 1;
}
复制代码

@each $item in a, b, c, d {
  .#{${member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
复制代码

Sass函数

自定义函数

@function double($d) {
  @return $d * 2
}
div {
  width: double(2px);
}
复制代码

自带函数

Sass提供类似如字符串函数(Strings)、数字函数(Numbers)、列表函数(Lists)、字典函数(Maps)等。
字符串函数有unquote用来删除字符串引号、quote用来添加引号。
数字函数类似Math提供如round、ceil、floor、abs等。
列表函数有length($list)返回列表长度等。
这里就不再一一列举，更多地是知道大概提供什么，后续可以去官网找。

总结

CSS预处理器如果想更好地使用，与设计师小姐姐先沟通好，能发挥更大的作用??。

 

转载自：https://juejin.cn/post/7001860784586227720