Sass进阶学习篇

Sass进阶学习篇

这篇学习笔记是Sass入门学习篇的后续学习。

1. 判断语句[ @if ]，可以搭配[ @else if ]和[ @else ]使用，判断true或false。

   @if $boolean { ... } @else { ... }

2. for循环，其中[ through ]可以更换为[ to ]，用[ to ]的时候不包含[ ]。

   @for $i from  through  { ..#{$i}.. }

3. while循环，直到while后面的表达式的值为false的时候停止循环。

   @while $types > 0 { ... }

1. each循环，遍历一个列表，从列表中取出对应的值。

   @each $var in  { ... }

2. unquote函数是用来删除一个字符串中的引号，quote则是用来加上引号。

   content: unquote('Hello Sass!');

3. 字符串大小写函数[ to-upper-case ]和[ to-lower-case ]。

   content: to-upper-case(aaaa);

4. 常用的数字函数。

• percentage($value): 将一个不带单位的数转为百分比值（.2转为20%）。
• round($value): 将数值四舍五入，转换成整数，并保留单位（px 或 % 等）。
• ceil / floor($value): 向上/向下取整，并保留单位。
• abs($value): 取绝对值，并保留单位。
• max / min($numbers…): 获得最大值/最小值，只能比较同一类型的值。
• random(): 获取一个0-1的随机数，不包含1。

1. 常用的列表函数。

• length($list): 返回列表的长度，$list的参数用空格隔开。
• nth($list, $n): 返回列表中指定标签值，从1开始算，颜色会自动转成数值型的。
• join($list1, $list2, [$separator]): 合并多个列表，separator为comma的时候显示逗号。
• append($list, $val, [$separator]): 把一个值追加到列表，separator为space的时候显示空格。
• zip($lists…): 将几个列表组成多维列表，每个单一的列表个数值必须是相同的。
• index($list, $value): 返回一个值在列表中的位置，从1开始，找不到则返回false。

1. 几个Introspection函数。

• type-of($value): 返回一个值的类型[ number string bool color ]。
• unit($number): 返回一个值的类型，除了[ px cm mm ]外的不同单位的加减单位获取会报错。
• unitless($number): 判断一个值是否带单位，不带单位则返回true。
• comparable($number1, $number2): 判断两个值是够可以加减、合并，[ px cm mm ]间为true。

1. Miscellaneous函数（三元条件函数），[ if($condition, trueVal, falseVal) ]。

2. Map是包含key-value的数组，类似JSON。下面是Map的一些常用函数。

• map-get($map, $key): 根据key值，返回map中的value。
• map-merge($map1, $map2): 合并两个map。
• map-remove($map, $key): 从map中删除一个key，并返回一个新map。
• map-keys($map): 返回map中所有key。
• map-values($map): 返回map中所有value。
• map-has-key($map, $key): 根据key值，判断map中是否有对应value。
• keywords($args): 返回一个函数的参数，这个参数可以动态设置key和value。

1. RGBA函数中，颜色可以用颜色缩写或颜色值代替RGB值。

   color: rgba(#f36, .5);  border-color: rgba(orange, .3);

2. 使用[ @import ]引用其他文件，如无后缀则默认为SCSS，带下划线开头的SCSS文件则不另外编译。
   下列情况会被编译成CSS的 @import ‘, 包含媒体查询)。

3. 写在嵌套样式中的@media媒体查询会冒泡到样式外面。