分类：CSS sass

1.@import 文件引入

可以引入sass或scss文件，被引入文件中定义的变量或mixins都可以在主文件中使用，默认引用当前目录，也可以同时引入多个文件，如果被引入文件没有扩展名，会自动加上扩展名搜寻当前目录。

编译为：

如果一个文件需要被引入，但又不希望其被编译为css文件，可以在文件名前加_,如_test.scss，这样被引入后，_test.scss文件内容就不会被编译为test.css文件。同一目录下不允许出现同一个带有_同名文件。

编译为：

@import一般在顶层，但是其允许被嵌套。

编译为：

2.@media 指定样式表规则用于指定的媒体类型和查询条件，允许嵌套，可以使用#{变量名}来指定设备类型和条件

@media 设备类型 and (查询条件)

编译为：

嵌套：

编译为：

3.extend 用来扩展选择器或占位符，可以减少输入代码量。可以同时继承多个样式

编译后：

占位符：

不调用：

如果不使用extend编译后，不产生代码

调用：

编译后：

4.@at-root 跳出根元素，不被父元素包含

编译后：

5.@debug 用来做调试，如果编译出错，在命令终端会输出设置的提示信息，编译时产生

6.@warn 警告信息 编译时产生

@warn “警告信息”;

7.@error 错误信息;编译时产生，测试成功

@error “错误信息”

编译为：

 

在sass终端下使用以下命令可以进入函数计算模式：

sass -i

RGB颜色由红，绿，蓝 三色构成

一.RGB颜色函数

1.rgb() 返回一个16进制颜色数值

直接输入rgb(200,40,88),返回16位颜色数值

 

2.red() 获取一个颜色中的红色值

3.green() 获取一个颜色中的绿色值

4.blue() 获取一个颜色中的蓝色值

5.mix() 将两种颜色根据一定的比例混合在一起，返回一个新颜色

mix($color1,$color2,$weight)

$color1和$color2是需要合并的颜色，可以bc

$weight 是合并比例，取值为0-1之间的小数，默认是50%，为两种颜色各占一半，如果是20%，第一种颜色为20%，第二种颜色为80%

编译为：

二.HSL颜色函数

1.lighten()和darken() 改变颜色的亮度值，当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。

lighten($color,亮度值)

变亮，亮度值为0-1的小数

darken($color,亮度值)

变暗，亮度值为0-1的小数

编译为：

2.saturate()和desaturate()改变颜色的饱和度，返回一个新颜色

saturate($color,饱和度)

增加饱和度

desaturate($color,饱和度)

减少饱和度

编译后

3.abjust-hue()调整颜色的色相，返回一个新颜色

abjust-hue($color,色相度)

色相度是：-360deg到360deg之间，当超过360时，取数值-360，当小于-360时，取+360的值

编译后：

4.grayscale()将颜色的饱和度调为0 于函数desaturate($color,100%)功能相同，一般这个函数用来把彩色转为不同程序的灰色。

grayscale($color)

 

三.透明度函数：

1.opacity()和alpha() 获取颜色透明度值，如果没有指定透明度，一般都为1

opacity($color)

alpha($color)

编译为：

2.rgba()将一个颜色根据透明度转换成rgba颜色。主要用来设置透明度

rgba(color,透明度)

color是一个颜色值

透明度是0到1的小数

编译为：

3.opacify()和fade-in()函数（同fade_in()），对透明度做加法运算，返回一个新颜色，更加不透明

opacify($color,参数2)

fade-in($color,参数2)

参数2取0-1的数，当透明度大于1时完全不透明

编译为：

4.transparentize()和fade-out() 让透明度相减，更家透明,返回一个新颜色

transparentize($color,参数2)

fade-out($color,参数2)

编译为：

 

sass map 是一个数据集合，常用来批量管理变量

$地图名:(键名1:键值,键名2:键值2,键名3:键值3….)

map常用函数：

(1)map-get() 函数 返回指定键值

map-get($map,$key)

$map是地图名

$key是键名

如果$key不存在于map,那么返回值为空

编译为：

(2)map-has-key()判断一个key是否存在于map中

map-has-key($map,key)

如果存在，返回true,如果不存在返回false.

编译为：

也可放要条件判断中：

编译为：

也可以用在自定义函数中：

编译为：

(3)map-keys() 返回列表中所有的key，值为列表

map-keys($map)

编译为：

可以通过此命令遍历出map中所有的值：

编译为：

(4)map-values()返回所有值，值为列表。

map-values($map)

编译为：

(5)map-merge()合并两个map,值为map

map-merge($map1,$map2)

编译为：

(6)map-remove() 删除map中的一个key,得到一个新map,不能删除map中的map,只能删除一个key，如果被删除的key不存在于map中，那么返回一个相同的map

 

编译为：

(7)keywords($args) 动态创建map，待补充

 

 

 

 

 

 

 

 

1.length()返回列表项的个数。如果在参数中直接写入列表项，需要使用空格分隔，不能使用逗号。

编译为：

2.nth() 指定列表中的某个值

nth($list,$n)

$list:列表名

$n:位置，从1开始，必须是大于0的整数

编译为：

3.join() 将两个列表合并，每次只能合并两个，如果有多于三个列表合并需要使用多次join()

join($list1,$list2,参数3)

join((1,2,3),(a,b,c)，参数3);

参数3指定列表项的分隔符，默认为auto,逗号为comma，空格为space.

当参数3为自动时：以列表1的分隔符来决定输出列表的分隔符，建议每次都指定

$list1 为逗号分隔，那么输出结果也是逗号分隔，

$list1 为空格分隔，那么输出结果也是空格分隔，

编译为：

4.append() 将一个列表值插入列表结尾

append($list1,$list2,参数三)

$list1,前面的列表

$list2,后面的列表

参数三，为分隔符，默认为auto,可以设置为comma逗号，space空格

编译后：

5.zip() 将多个列表组成一个多维列表，类似数组

编译为：

6.index()索引函数

index($list,值)，返回值所在的$list中的位置，从1开始，如果没有返回false

编译为：

7,introspection 自查函数

(1)type-of() 判断一个值是什么类型

返回值：

number 为数值型,可以带单位

string 为字符串型，两边用引号

bool为布尔型，true或false

color为颜色型,#000,red，rgb(0,0,0)等

编译为：

(2)unit() 获取一个值的单位，

如果值是表达式有多个单位，乘除单位可以不同，加减单位必须相同

当除两个单位相同时，返回空

编译为：

(3)unitless() 判断一个值有没有单位，如果没有返回true,如果有false

编译为：

实际中可以判断值有没有单位，如果没有自动给其加上

编译为:

(4)comparable() 判断两个数是否可以进行加 减 或 合并。

可以返回true.不可以返回false

编译为：

(5)三元函数

if($条件,$值1,$值2 )

当条件为真时，值为1

当条件为假时，值为2

编译为：

 

 

 

 

1.percentage() 将一个数字转换为百分比，单位必须相同

编译为：

2.round() 四余五入为最近整数

编译后：

3.ceil() 将一个数转换为最接近的数，只做入，不做舍

编译后：

4.floor() 将一个数转换为最接近的数，只做舍，不做入，和ceil相反

编译为：

5.abs() 返回一个数的相对值，可以带单位

编译为:

6.取最大值和最小值

min() 在多个数中找到最小的一个，可设置任意多个参数，如果有单位，单位必须相同

编译为：

max()在多个数中找最大值，可设置任意多个参数，如果有单位，单位必须相同

编译为：

7.random()取一个小于1的随机数

编译为：

 

1.字串函数：

(1)unquote 函数

unquote($string) 删除字符串两边的单引号，双引号，不能删除中间引号，不能删除单边引号。

编译后：

 

quote($string) 给字符串两边添加双引号，字符串中间不能有空格，不能有单引号或双引号，如果字符串两边已经有单引号会被自动换为双引号,!、?、> 等，除中折号 – 和 下划线_ 都需要使用双引号括起

编译后：

(2)字符串大小写转换函数：

to-upper-case() 将小写转换成大写

编译后：

to-lower-case() 大写转小写

编译后：

 

 

 

1.条件语句：@if

@if 条件为真时执行代码块，可以配合@else if 和 @else来用

编译后：

2.循环语句：

(1)@for

@for $i from <start> through <end>

@for $i from <start> to <end>

$i是变量

start:起始

end:结束

through包含end数, to 不包含end这个数

编译为：执行了三次

编译为：执行了两次

做网格案例：

编译为：

(2)@while

@whie 条件｛内容 条件变化｝

编译为：

(3)@each 循环

@each $var in <list>

$var 列表中对应值

list 列表名

编译为：

1.加法：

px可以和in,cm,mm相加，不能和em相加

编译后：

2.减法

px可以和in,cm,mm相减，不能和em相减

编译后：

3.乘法

被乘数和乘数不能同时都带单位，只能有一个带单位或都不带单位

编译后：

4.除法

在单表达式的两边需要加括号

在多运算符表达式中不需要加括号

当在表达式中有变量或函数时，也不需要加括号

当两个数都带单位时，当得一个无单位数

编译后：

多运算符：

编译后：

 

5.变量参于运算

编译：

6.数字运算：

加 减 乘 除 也可以使用括号提高优先集

编译后：

7.颜色运算：

可以颜色之前运算，也可以和数字一起运算，采用分段运算

编译后：

8.字符运算：

使用+号可以链接两个字符串，

编译为：

 

 

 

 

 

代码：

[cce]
//SCSS中混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

//SCSS 继承的运用
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

//SCSS中占位符的使用
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}
[/cce]

编译后：

可以看出：

1.混合宏不会自动合并重复代码，会产生冗余代码，但其可以通过变量可以传参数

2. 继承和占位符都会自动合并重复代码，但不能传参数

建议：

1.有需要涉及到变量传参数，使用混合宏

2.不使用变量传参数，且在代码中已经有一个共用样式存在使用继承

3.不使用变量传参数，代码中根据需要有一个共用的样式那么就使用占位符