Sass内置了许多的方法模块,使用 @use 模块来使用模块,相当于JS中的import
sass:color: 颜色模块sass:list: 集合操作模块sass:map: 映射操作模块sass:math: 数学模块sass:meta: 元数据内置模块sass:selector: 选择器模块sass:string: 字符串模块
| 所属模块 | 方法(所属模块.方法名) | 作用 | 备注 |
|---|---|---|---|
| meta | load-css($url, $with:null) | 以指定配置加载指定模块 | 与 @use不同点:- 不会暴露全部引用模块的成员 - 只引用一次,且配置不可变更 - 可以在样式文件的任意地方使用 |
calc-args($calc) | 获取传入方法的参数 | ||
calc-name($calc) | 获取传入方法的方法名 | ||
content-exists() | 返回 @mixin是否有 @content内容 | ||
feature-exist($feature) | |||
function-exist($name, $module:null) | |||
get-function($name, $css:false, $module: null) | |||
global-variable-exist($name, $module: null) | 返回给定名称的全局变量是否存在 | ||
inspect($value) | 用于调试,输出字符串 | ||
syntax-colors($args...) | 用于返回参数列表的映射,用于mixin或方法 | ||
mixin-exist($name, $module:null) | 用于判断mixin 是否存在 | ||
module-functions($module) | 用于返回模块(@use)的全部方法 | ||
module-variables($module) | 用于返回模块的全部变量 | ||
type-of($value) | 返回给定值的类型 | number、string、color、list、map、calculation、bool、null、function、arglist | |
variable-exist($name) | 返回变量是否存在 | ||
| list 集合操作 | append($list, $val, $separator: auto) | 为集合添加元素,返回新集合 | |
index($list, $value) | 返回元素在集合中的下标,没有元素返回 null | ||
is-bracketed($list) | 返回集合是否被[]包裹 | ||
join($list1, $list2, $separator:auto, $bracketed: auto) | 合并两个集合, 返回新集合 | ||
length($list) | 返回集合长度 | ||
separator($list) | 返回集合分隔符 | space、comma、slash | |
nth($list, $n) | 返回集合的第n个元素 | 第一个元素下标为1 | |
set-nth($list, $n, $value) | 设置集合第n个元素值,返回新集合 | 负数则从右向左替换,超出长度的n会报错 | |
slash($ele...) | 返回/分割的集合 | ||
zip($lists...) | 按位置对应合并多个集合,返回逗号分割的新集合 | 未对应的元素将会被舍弃 | |
| map 映射操作 | deep-merge($map1,$map2) | 合并两个映射(递归子映射) | |
merge($map1, $map2)merge($map1, $keys..., $map2) | 浅合并两个映射 若指定keys,则为map1属性对象与map2合并 | ||
deep-remove($map, $key, $keys...) | 递归移除映射key,返回$map拷贝 如果 keys不为空,则以$keys最后一个key作为目标进行移除,前面key为目标key的父级 | 比如 map.get($fonts, "Helvetica", "weights", "regular")则为移除 $fonts.Helvetica.weights.regular | |
remove($map, $keys...) | 移除映射指定key | ||
set($map, $key, $value)set($map1, $keys..., $value) | 为映射指定属性设置值 | ||
get($map, $key, $keys...) | 获取key对应的值,没有对应值返回null | ||
has($map, $key, $keys...) | 返回是否有对应key | ||
keys($map) | 返回map的key集合 | ||
values($map) | 返回map的value集合 | ||
| color 颜色操作 | adjust($color, $red: null, $greed: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) | 用于调整颜色, 以固定数值加减调整,返回新的颜色 | 等同于adjust-color(...) |
change($color, $red: null, $greed: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) | 用于调整颜色,将颜色的特定属性值改变到指定值,返回新的颜色 | 等同于change-color(...) | |
scale($color, $red: null, $greed: null, $blue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null) | 用于调整颜色,以百分比形式缩放颜色特定属性值,返回新的颜色 | ||
adjust-hue($color, $degress) | 改变颜色色调 | 角度($degress)在360deg与 -360deg之间 | |
alpha($color)* | 获取颜色透明度 | 可直接使用,也可使用 opacity($color) | |
red($color)* | 获取颜色红色值 | ||
green($color)* | 获取颜色绿色值 | ||
blue($color)* | 获取颜色蓝色值 | ||
lightness($color) | 获取颜色白色值 | ||
blackness($color) | 获取颜色黑色值 | ||
whiteness($color) | 返回颜色HWB白色度 | ||
saturation($color) | 获取颜色饱和度 | ||
hue($color) | 获取颜色hue角度 | ||
complement($color) | 反转颜色hue | 相当于 adjust($color, $hue: 180) | |
darken($color, $amount) | 无需color., 将颜色变得更暗(减少HSL明度) | $amount范围为 0% ~ 100% | |
lighten($color,$amount) | 无需color., 将颜色变得更亮(增加HSL明度) | $amount范围为 0% ~ 100% | |
opacity($color,$amount)fade-in($color,$amount) | 无需color.,增加颜色透明度 | $amount范围为 0% ~ 100%相当于 color.adjust($color,$alpha: -$amount) | |
transparentize($color, $amount)fade-out($color, $amount) | 无需color.,减少颜色透明度 | $amount范围为 0% ~ 100%相当于 color.adjust($color,$alpha: -$amount) | |
desaturate($color, $amount)* | 降低颜色饱和度 | $amount范围为 0% ~ 100%相当于 color.adjust($color, $saturation: -$amount) | |
grayscale($color) | 返回相同亮度的灰色 | 相当于color.change($color, $saturation: 0%) | |
invert($color) | 返回颜色的对立色 | ||
mix($color1, $color2, $weight:50%) | 混合两个颜色,默认比重为 50% | ||
| math 数学 | $pi $e | ||
ceil($number) | 向上取整, 4.1 => 5 | ||
floor($number) | 向下取整, 4.9 => 4 | ||
round($number) | 四舍五入 | ||
clamp($min, $number, $max) | 如果数字小于$min返回 min如果数字大于 $max返回 max | ||
max($numbers...) | 返回最大的数 | ||
min($numbers...) | 返回最小的数 | ||
abs($number) | 返回绝对值 | ||
hypot($numbers...) | 返回数字平方和的平方根 | math.hypot(3, 4); // 5 | |
pow($base, $exponent) | 幂 | ||
log($number, $base) | 对数 | ||
sqrt($number) | 平方根 | ||
cos($number)``sin($number)``tan($number) | |||
asin($number)``$atan($number)``$atan2($y, $x) | |||
compatible($number1, $number2) | 判断两个数字是否可以可比较 |