• sass内置函数汇总


    一、Sass String(字符串) 函数

    quote(string)

    给字符串添加引号。

    实例:
    quote(runoob)
    结果: "runoob"

    str-index(string, substring)

    返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串,则返回 null。

    实例:

    str-index(abcd, a)  => 1
    str-index(abcd, ab) => 1
    str-index(abcd, X)  => null
    str-index(abcd, c)  => 3
    str-insert(stringinsertindex)

    在字符串 string 中 index 位置插入 insert。

    实例:
    str-insert("Hello world!", " runoob", 6)
    结果: "Hello runoob world!"

    str-length(string)返回字符串的长度。

    实例:
    str-length("runoob")
    结果: 6
    str-slice(stringstartend)

    从 string 中截取子字符串,通过 start-at 和 end-at 设置始末位置,未指定结束索引值则默认截取到字符串末尾。

    实例:

    str-slice("abcd", 2, 3)   => "bc"
    str-slice("abcd", 2)      => "bcd"
    str-slice("abcd", -3, -2) => "bc"
    str-slice("abcd", 2, -2)  => "bc"
    to-lower-case(string)将字符串转成小写

    实例:
    to-lower-case("RUNOOB")
    结果: "runoob"
    to-upper-case(string)将字符串转成大写

    实例:
    to-upper-case("runoob")
    结果: "RUNOOB"
    unique-id()返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。

    实例:
    unique-id()
    Result: uad053b1c
    unquote(string)移除字符串的引号

    实例:
    unquote("runoob")
    结果: runoob

     二、Sass 数字函数

    abs(number)返回一个数值的绝对值。

    实例:
    abs(15)
    结果: 15
    abs(-15)
    结果: 15
    ceil(number)向上取整

    实例:
    ceil(15.20)
    结果: 16
    comparable(num1num2)返回一个布尔值,判断 num1 与 num2 是否可以进行比较

    实例:
    comparable(15px, 10px)
    结果: true
    comparable(20mm, 1cm)
    结果: true
    comparable(35px, 2em)
    结果: false
    floor(number)向下取整

    实例:
    floor(15.80)
    结果: 15
    max(number...)返回最大值

    实例:
    max(5, 7, 9, 0, -3, -7)
    结果: 9
    min(number...)返回最小值

    实例:
    min(5, 7, 9, 0, -3, -7)
    结果: -7
    percentage(number)将数字转化为百分比的表达形式。

    实例:
    percentage(1.2)
    结果: 120
    random()返回 0-1 区间内的小数,

    实例:
    random()
    结果: 0.45673
    random(number)返回 1 至 number 之间的整数,包括 1 和 limit。

    实例:
    random(6)
    结果: 4
    round(number)返回最接近该数的一个整数,四舍五入。

    实例:
    round(15.20)
    结果: 15
    round(15.80)
    结果: 16

    三、Sass 列表(List)函数

    append(listvalue, [separator])将单个值 value 添加到列表尾部。separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。

    实例:
    append((a b c), d)
    结果: a b c d
    append((a b c), (d), comma)
    结果: a, b, c, d
    index(listvalue)返回元素 value 在列表中的索引位置。

    实例:
    index(a b c, b)
    结果: 2
    index(a b c, f)
    结果: null
    is-bracketed(list)判断列表中是否有中括号

    实例:
    is-bracketed([a b c])
    结果: true
    is-bracketed(a b c)
    结果: false
    join(list1list2, [separator, bracketed])合并两列表,将列表 list2 添加到列表 list1 的末尾。separator 是分隔符,默认会自动侦测,或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号,可以设置为 true 或 false。

    实例:
    join(a b c, d e f)
    结果: a b c d e f
    join((a b c), (d e f), comma)
    结果: a, b, c, d, e, f
    join(a b c, d e f, $bracketed: true)
    结果: [a b c d e f]
    length(list)返回列表的长度

    实例:
    length(a b c)
    结果: 3
    list-separator(list)返回一列表的分隔符类型。可以是空格或逗号。

    实例:
    list-separator(a b c)
    结果: "space"
    list-separator(a, b, c)
    结果: "comma"
    nth(listn)获取第 n 项的值。

    实例:
    nth(a b c, 3)
    结果: c
    set-nth(listnvalue)设置列表第 n 项的值为 value

    实例:
    set-nth(a b c, 2, x)
    结果: a x c
    zip(lists)将多个列表按照以相同索引值为一组,重新组成一个新的多维度列表。

    实例:
    zip(1px 2px 3px, solid dashed dotted, red green blue)
    结果: 1px solid red, 2px dashed green, 3px dotted blue

    四、Sass Map(映射)函数

    map-get(mapkey)返回 Map 中 key 所对应的 value(值)。如没有对应的 key,则返回 null 值。

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    map-get($font-sizes, "small")
    结果: 12px
    map-has-key(mapkey)判断 map 是否有对应的 key,存在返回 true,否则返回 false。

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    map-has-key($font-sizes, "big")
    结果: false
    map-keys(map)返回 map 中所有的 key 组成的队列。

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    map-keys($font-sizes)
    结果: "small", "normal, "large"
    map-merge(map1map2)合并两个 map 形成一个新的 map 类型,即将 map2 添加到 map1的尾部

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    $font-sizes2: ("x-large": 30px, "xx-large": 36px)
    map-merge($font-sizes, $font-sizes2)
    结果: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
    map-remove(mapkeys...)移除 map 中的 keys,多个 key 使用逗号隔开。

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    map-remove($font-sizes, "small")
    结果: ("normal": 18px, "large": 24px)
    map-remove($font-sizes, "small", "large")
    结果: ("normal": 18px)
    map-values(map)返回 map 中所有的 value 并生成一个队列。

    实例:
    $font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
    map-values($font-sizes)
    结果: 12px, 18px, 24px

    五、Sass 选择器函数

    is-superselector(supersub)比较两个选择器匹配的范围,即判断 super 选择器是否包含了 sub 选择器所匹配的范围,是的话返回 true,否则返回 false。

    实例:
    is-superselector("div", "div.myInput")
    结果: true
    is-superselector("div.myInput", "div")
    结果: false
    is-superselector("div", "div")
    结果: true
    selector-append(selectors)将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.

    实例:
    selector-append("div", ".myInput")
    结果: div.myInput
    selector-append(".warning", "__a")
    结果: .warning__a
    selector-extend(selectorextendeeextender)
    selector-nest(selectors)返回一个新的选择器,该选择器通过提供的列表选择器生成一个嵌套的列表。

    实例:
    selector-nest("ul", "li")
    结果: ul li
    selector-nest(".warning", "alert", "div")
    结果: .warning div, alert div
    selector-parse(selector)将字符串的选择符 selector 转换成选择器队列。

    实例:
    selector-parse("h1 .myInput .warning")
    结果: ('h1' '.myInput' '.warning')
    selector-replace(selectororiginalreplacement)给定一个选择器,用replacement 替换 original 后返回一个新的选择器队列。

    实例:
    selector-replace("p.warning", "p", "div")
    结果: div.warning
    selector-unify(selector1selector2)将两组选择器合成一个复合选择器。如两个选择器无法合成,则返回 null 值。

    实例:
    selector-unify("myInput", ".disabled")
    结果: myInput.disabled
    selector-unify("p", "h1")
    结果: null
    simple-selectors(selectors)将合成选择器拆为单个选择器。

    实例:
    simple-selectors("div.myInput")
    结果: div, .myInput
    simple-selectors("div.myInput:before")
    结果: div, .myInput, :before

    六、Sass Introspection 函数

    call(functionarguments...)函数的动态调用,即调用函数 function 参数为 arguments,并返回结果。
    content-exists()查看当前的混入是否传递 @content 块。
    feature-exists(feature)检查当前的 Sass 实现是否支持该特性。

    实例:
    feature-exists("at-error");
    结果: true
    function-exists(functionname)检测指定的函数是否存在

    实例:
    function-exists("nonsense")
    结果: false
    get-function(functionname, css: false)返回指定函数。如果 css 为 true,则返回纯 CSS 函数。
    global-variable-exists(variablename)检测某个全局变量是否定义。

    实例:
    variable-exists(a)
    结果: true
    inspect(value)返回一个字符串的表示形式,value 是一个 sass 表达式。
    mixin-exists(mixinname)检测指定混入 (mixinname) 是否存在。

    实例:
    mixin-exists("important-text")
    结果: true
    type-of(value)返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。

    实例:
    type-of(15px)
    结果: number
    type-of(#ff0000)
    结果: color
    unit(number)返回传入数字的单位(或复合单位)。

    实例:
    unit(15px)
    结果: px
    unitless(number)返回一个布尔值,判断传入的数字是否带有单位。

    实例:
    unitless(15px)
    结果: false
    unitless(15)
    结果: true
    variable-exists(variablename)判断变量是否在当前的作用域下。

    实例:
    variable-exists(b)
    结果: true

  • 相关阅读:
    Dockerfile的常用指令和构建案例
    3 分钟掌握 Node.js 版本的区别
    知识关联视角下金融证券知识图谱构建与相关股票发现
    使用一个命令使您的 Python 代码更优雅、更易读或更现代
    《前端运维》四、Jenkins--持续构建
    《BEV LaneDet:Fast Lane Detection on BEV Ground》论文笔记
    vue单页面应用使用 history模式路由时刷新页面404的一种可能性
    Linux下部署MySQL-MHA环境
    【79 backtrader的一些高级技巧】谈一谈如何在单个品种上同时运行多个策略?
    JavaEE:多线程(3):案例代码
  • 原文地址:https://blog.csdn.net/Javon_huang/article/details/125536002