如题所述
滴滴大佬：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}:1pxsolid$color;}嵌套这应该是最熟悉的。?除了选择器可以嵌套，属性和伪类也可嵌套。
<divclass="parent-container"><divclass="parent-container-header"></div></div>.parent-container{&-header{//选择器嵌套background{color:red;//属性嵌套}&:hover{//伪类嵌套color:green;}}}继承允许一个选择器，继承另一个选择器所有的属性。用@extend继承已存在的样式块。
.class1{border:1pxsolid#ddd;}.class2{@extend.class1;font-size:12px;}混合类似Vue的混入，是可以重用的样式代码，且可指定参数和默认值，运用@mixin使用如下。
@mixinleft($value:10px){float:left;margin-left:$value;}div{@includeleft(4px);}@import用来引入外部样式文件
@import"文件相对路径"注释有两种方式/*注释*/和//注释
颜色函数内置颜色函数，便于生成系列颜色。
lighten(#cc3,10%)//#d6d65cdarken(#cc3,10%)//#a3a329grayscale(#cc3)//#808080complement(#cc3)//#33cSass运算加减乘除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，根据参数判断。
$side:left;div{border-#{$side}:1pxsolid$color;}0循环可帮助生成类似选择器，如定义一些类似的外边距margin。有@for、@while、@each
$side:left;div{border-#{$side}:1pxsolid$color;}1$side:left;div{border-#{$side}:1pxsolid$color;}2$side:left;div{border-#{$side}:1pxsolid$color;}3Sass函数自定义函数$side:left;div{border-#{$side}:1pxsolid$color;}4自带函数Sass提供类似如字符串函数(Strings)、数字函数(Numbers)、列表函数(Lists)、字典函数(Maps)等。字符串函数有unquote用来删除字符串引号、quote用来添加引号。数字函数类似Math提供如round、ceil、floor、abs等。列表函数有length($list)返回列表长度等。这里就不再一一列举，更多地是知道大概提供什么，后续可以去官网找。
CSS预处理器如果想更好地使用，与设计师小姐姐先沟通好，能发挥更大的作用?。
参考Sass-学习笔记[基础篇]Sass用法指南Sass命令及函数知识整理
作者：瑾行著作权归作者所有。
链接：https://juejin.cn/post/7001860784586227720
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场
