sass
CSS预处理器，你还是只会嵌套么 ？
前言
滴滴大佬：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
