sass的常用语法汇集

sassScript常用关键字：

$：声明变量
&：父级选择器
>：子级选择器（最靠近的子级，不包括子级后面的子级）
+：与选择器后相邻的同级选择器
~：相邻的同级选择器
（属性:）：属性嵌套
#{}：插值语句，括号中可以放入变量
!default： 给变量赋予默认值，放在变量的后面，不能再修改变量
!global ：声明全局变量，放在变量的后面。

sassScript的指令

混合指令

@mixin：声明混合样式
@include：引用混合样式
@extend：选择器的样式嵌套
@import 导入样式文件，通过url()导入外部样式文件，可以导入class实现样式继承
@media 媒体查询指令。用法与平时一样，但如果用@media嵌套@media，里面嵌套的@media会被编译到第一个@media上，一起包住第一个@media的所有选择器。
@at-root 样式抽离，把@at-root这一段样式抽出到与最外层的位置。

控制指令

@if
@else if
@else
@for $var from to (包含 ，不包括 )
@for $var from through (包含 和 )
@each $var in 对数组list和视图map都适用
@while 循环语句
@content 混合样式中的内容占位符。在@mixin中使用，在@include引用混合样式时，包含的内容会放到@mixin中。

函数指令

@function 声明一个函数
@return 在函数中返回函数的数据

7种数据类型：

字符串string：KaTeX parse error: Expected 'EOF', got '#' at position 19: …der:'1px solid #̲ccc'; 数字number：num:20;
颜色color：KaTeX parse error: Expected 'EOF', got '#' at position 7: color:#̲ccc; 布尔值boolean…is:true;
空值null： $pad:null;数组列表list：$margins:10 20 30 40 或者 $paddings:10,20,30,40用空格或者逗号分隔开。视图map：$font:(width:‘100px’,width:‘300px’) 用括号包住里面的键值对。

sassScript函数：

string字符串函数:
多数以str-开头

str-index(string,substring) ：返回字符串string的子字符串substring的下标索引，没有找到返回null
str-length(string)：返回字符串string的长度
str-insert(string,insertString,index)：在字符串string的index位置，插入insertString字符串
str-slice(string,start,end)：截取字符串string从start位置到end位置的子字符串
to-lower-case(string)：将字符串string转换成小写
to-upper-case(string)：将字符串string转换成大写
quote(string)：给字符串添加引号“string”
unquote(string)：去掉字符串string的引号
unique-id()：此方法返回一个唯一的id，只适用于单次编译中，多次编译不适用。

数组list函数：

index(list,value)：返回value在数组list中的索引值
length(list)：返回数组list的长度
append(list,value,[separator])：在数组list的末尾添加value
join(list1,list2)：把list2合并到list1中
nth(list,n)：获取数组list第n个值。起始值为1，不是0。
set-nth(list,n,value)：设置数组list的第n个值为value。起始值为1，不是0。
list-separator(list)：返回数组list的分割符号（空格或者逗号）
zip(list1,list2,list3…)：以相同索引为一组（数组list），返回一个二维数组。

颜色color函数：
相关术语：
红色（red），绿色（green），蓝色（blue），色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）,透明度（opcity）

获取颜色相关的值：
red(color)：获取颜色的红色值（0-255）
green(color)：获取颜色的绿色值（0-255）
blue(color)：获取颜色的蓝色值（0-255）
hue(color)：获取颜色的色相 (0deg - 255deg)
saturation(color)：获取颜色的饱和度值（0%-100%）
lightness(color)：获取颜色的亮度值（0%-100%）
alpha(color)：获取颜色的透明度值（0-1）
opacity(color)：获取颜色的透明度值（0-1）

创建颜色：
rgb(red,green,blue);
rgba(red,green,blue,alpha)
hsl(hue,saturation,lightness)
hsla(hue,saturation,lightness,alpha)

操作颜色：
lighten(color,value)：亮度值（0% - 100%），颜色变亮
darken(color,value)：亮度值（0% - 100%），颜色变暗
saturate(color,value)：饱和值（0% - 100%），提升饱和值
desaturate(color,value)：饱和值（0% - 100%），降低饱和值
fade-in(color,value)：透明度（ 0-1 ），降低明度
fade-out(color,value)：透明度（ 0-1 ），提高明度

如果对您有帮助，请点个赞，谢谢。