Sass技巧

[Lenny-Hu]

Sass函数功能汇总

来源：https://www.jianshu.com/p/ef2ca6fbf944

1. 字符串函数

• unquote（$string）：删除字符串中的引号；
• quote（$string）：给字符串添加引号；
• To-upper-case（$string）：将字符串小写字母转换为大写字母
• To-lower-case（$string）：将字符串大写字母转换为小写字母

2. 数字函数

• percentage($value)：将不带单位的数转换成百分比值；
• round($value)：将数值四舍五入，转换成一个最接近的整数；
• ceil($value)：向上取整；
• floor($value)：向下取整；
• abs($value)：取数的绝对值；
• min($numbers…)：找出几个数值之间的最小值；
• max($numbers…)：找出几个数值之间的最大值；
• random(): 获取随机数

3. 列表函数

• length($list)：返回一个列表的长度值;
• nth($list, $n)：返回一个列表中指定的某个标签值;
• join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
• append($list1, $val, [$separator])：将某个值放在列表的最后；
• zip($lists…)：将几个列表结合成一个多维的列表；
• index($list, $value)：返回一个值在列表中的位置值。

4. Introspection函数

• type-of($value)：返回一个值的类型;
• unit($number)：返回一个值的单位;
• unitless($number)：判断一个值是否带有单位;
• comparable($number-1, $number-2)：判断两个值是否可以做加、* 减和合并.

5. 三元条件函数 if($condition,$if-true,$if-false); 判断$condition，如果条件成立，则返回$if-true的结果，如果条件不成立，则返回$if-false的结果。

6.Maps的函数

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

7.颜色函数

• rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
• rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
• red($color)：从一个颜色中获取其中红色值；
• green($color)：从一个颜色中获取其中绿色值；
• blue($color)：从一个颜色中获取其中蓝色值；
• mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

8.自定义函数 考虑到Sass自定义函数用到地方比较多，并且后续需要单独拿出来和Mixin、extend进行比较，所以另开篇幅了 【Sass自定义函数】：https://www.jianshu.com/p/7f879ce0cbb9

[Lenny-Hu]

sass 遍历对象数组

// 1
$stars: (
  (size: 40px, left: 22px, top: 97px),
  (size: 32px, left: 42px, top: 70px),
  (size: 31px, left: 464px, top: 273px),
  (size: 28px, left: 240px, top: 402px),
  (size: 25px, left: 289px, top: 557px)
);

@for $i from 1 through length($stars) {
  $item: nth($stars, $i);

  &:nth-child(#{$i}) {
    width: map-get($item, size);
    height: map-get($item, size);
    left: map-get($item, left);
    top: map-get($item, top);
  }
}

// 2
@each $i, $v in (
                1: (n: 'fan', w: 41, h: 61),
                2: (n: 'gyro', w: 52, h: 52),
                3: (n: 'pillow', w: 64, h: 53),
                4: (n: 'gift', w: 50, h: 53)
            ) {
                &:nth-child(#{$i}) dt {
                    @include bg-image('exchange/#{map-get($v, n)}', px2rem(map-get($v, w)), px2rem(map-get($v, h)));
                    background-position: center;
                }
            }