Sass - 内置模块

发布于: 6/12/2022 阅读大约需要4分钟

Sass内置了许多的方法模块,使用 @use 模块来使用模块,相当于JS中的import

  • sass:color: 颜色模块
  • sass:list: 集合操作模块
  • sass:map: 映射操作模块
  • sass:math: 数学模块
  • sass:meta: 元数据内置模块
  • sass:selector: 选择器模块
  • sass:string: 字符串模块
所属模块方法(所属模块.方法名作用备注
metaload-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)返回给定值的类型numberstringcolorlistmapcalculationboolnullfunctionarglist
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)返回集合分隔符spacecommaslash
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)判断两个数字是否可以可比较