Sass学习笔记

时间:2021-03-06 02:31:12
语法
@each $var in <list>//循环就是去遍历一个列表,然后从列表中取出对应的值
@while $types > 0 //循环直到函数不成立

SASS函数

To-upper-case(); //转换成大写字母
To-lower-case(); //转换成小写字母
unquote($string)//删除字符串中的引号
quote($string)//给字符串添加引号
颜色
rgb($red,$green,$blue)//根据红、绿、蓝三个值创建一个颜色;
rgba($red,$green,$blue,$alpha)//根据红、绿、蓝和透明度值创建一个颜色;
red($color)//从一个颜色中获取其中红色值;
green($color)//从一个颜色中获取其中绿色值;
blue($color)//从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight])//把两种颜色混合在一起。
//HSL
hsl($hue,$saturation,$lightness)//通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
hsla($hue,$saturation,$lightness,$alpha)//通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
hue($color)//从一个颜色中获取色相(hue)值;
saturation($color)//从一个颜色中获取饱和度(saturation)值;
lightness($color)//从一个颜色中获取亮度(lightness)值;
adjust-hue($color,$degrees)//通过改变一个颜色的色相值,创建一个新的颜色;
lighten($color,$amount)//通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
darken($color,$amount)//通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
saturate($color,$amount)//通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
desaturate($color,$amount)//通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
grayscale($color)//将一个颜色变成灰色,相当于desaturate($color,100%);
complement($color)//返回一个补充色,相当于adjust-hue($color,180deg);
invert($color)//反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
//透明度
alpha($color) /opacity($color)//获取颜色透明度值;
rgba($color, $alpha)//改变颜色的透明度值;
opacify($color, $amount) / fade-in($color, $amount)//使颜色更不透明;
transparentize($color, $amount) / fade-out($color, $amount)//使颜色更加透明。
数值
percentage($value)//将一个不带单位的数转换成百分比值;
round($value)//将数值四舍五入,转换成一个最接近的整数;
ceil($value)//将大于自己的小数转换成下一位整数;
floor($value)//将一个数去除他的小数部分;
abs($value)//返回一个数的绝对值(返回正整数);
min($numbers…)//找出几个数值之间的最小值;
max($numbers…)//找出几个数值之间的最大值;
random()//获取随机数
列表(数组)
length($list)//返回一个列表的长度值;
nth($list, $n)//返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])//将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator])//将某个值放在列表的最后;
zip($lists…)//将几个列表结合成一个多维的列表;
index($list, $value)//返回一个值在列表中的位置值。
返回
type-of($value)//返回一个值的类型(number 为数值型。 string 为字符串型。 bool 为布尔型。 color 为颜色型)
unit($number)//返回一个值的单位
unitless($number)//判断一个值是否带有单位
comparable($number-1, $number-2)//判断两个值是否可以做加、减和合并
map
map-get($map,$key)//根据给定的 key 值,返回 map 中相关的值。
map-merge($map1,$map2)//将两个 map 合并成一个新的 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 值,如果有返回 true,否则返回 false。
keywords($args)//返回一个函数的参数,这个参数可以动态的设置 key 和 value。