ZHANGKB

【Sass】内置函数

2021/09/09 09:31:42

color

  1. adjust-color($color, arguments...) 相当于其他方法的基类, 一参为颜色值, 二参为要改变的内容, 可写多个 可选参数类型包括: ($red: null, $green: null, blue:null,blue: null,hue: null, $saturation: null, $lightness: null,$alpha: null)
    $color: rgba(#036, 0.7);
div {
  color: adjust-color($color, $alpha: -0.2, $red: 15);
}
  2. alpha(red) 获取颜色透明度
  3. red(#000), green(), blue(), 获取颜色的红, 绿, 蓝色值(0-255)
  4. hue(hsl(50,1,1)), saturation(hsl(50,1,1)), lightness(hsl(50,1,1)), 获取 hsl 颜色的色相(0-360deg), 饱和度, 亮度
  5. darken(#fff, 10%) 让颜色变深, 二参为 0-100 的数字( % 可加可不加)
  6. mix(#fff,#000, 10) 混合, 最后一个参数为左右权重比
  7. opacify(rgba(#036, 0.7), 0.2) 增加不透明度, 一参为带 alpha 通道的颜色值, 二参为要增加的值(0-1)
  8. transparentize(rgba(#036, 0.7), 0.2) 减少不透明度(更透明), 同上

list

  1. append($list, @val, @separator) 在列表最后添加数据 $separator 有三个可选值, 用于决定返回的列表以逗号还是空格分隔: comma 逗号, space 空格, auto 取列表的分隔符

    $list: 1 2, 3 4;
div {
  content: append($list, $val: a, $separator: space); //=> list
}

  2. index(1px solid red, 1px); 返回属性在列表中出现的索引, 没有则返回 null, 有多个返回第一个的索引