• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • sass:list

    在 Sass 中,每个映射都算作一个列表,其中包含每个键/值对的两个元素列表。例如,(1: 2, 3: 4)计为(1 2, 3 4)。所以所有这些功能也适用于地图!单个值也算作列表。所有这些函数都将1px视为包含值1px的列表。


    list.append()

    list.append($list, $val, $separator: auto)
    append($list, $val, $separator: auto) //=> list
    

    返回在末尾添加了$val$list的副本。如果$separator是逗号、空格或斜杠,则返回的列表分别是逗号分隔的、空格分隔的或斜杠分隔的。如果是auto(默认),返回的列表将使用与$list相同的分隔符(如果$list没有分隔符,则使用空格)。不允许使用其他值。

    请注意,与列表不同list.join(),如果$val是一个列表,则它嵌套在返回的列表中,而不是将其所有元素添加到返回的列表中。

    @debug list.append(10px 20px, 30px); // 10px 20px 30px
    @debug list.append((blue, red), green); // blue, red, green
    @debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
    @debug list.append(10px, 20px, $separator: comma); // 10px, 20px
    @debug list.append((blue, red), green, $separator: space); // blue red green
    


    list.index()

    list.index($list, $val)
    index($list, $val) //=> number | null
    

    返回$list$val的索引。如果$val未出现在$list中,则返回null。如果$val$list中多次出现,则返回其第一次出现的索引。

    @debug list.index(1px solid red, 1px); // 1
    @debug list.index(1px solid red, solid); // 2
    @debug list.index(1px solid red, dashed); // null
    


    list.is-bracketed()

    list.is-bracketed($list)
    is-bracketed($list) //=> boolean 
    

    返回$list是否包含方括号。

    @debug list.is-bracketed(1px 2px 3px); // false
    @debug list.is-bracketed([1px, 2px, 3px]); // true
    


    list.join()

    list.join($list1, $list2, $separator: auto, $bracketed: auto)
    join($list1, $list2, $separator: auto, $bracketed: auto) //=> list
    

    返回一个新列表,其中包含$list1的元素,后跟$list2的元素。

    ⚠️注意!
    因为单个值计为单个元素列表,所以可以使用list.join()将值添加到列表的末尾。但是,不建议这样做,因为如果该值是一个列表,它将被连接,这可能不是您所期望的。改为使用list.append()将单个值添加到列表中。仅用于list.join()将两个列表合并为一个。

    如果$separator是逗号、空格或斜杠,则返回的列表分别是逗号分隔的、空格分隔的或斜杠分隔的。如果是auto(默认值)返回的列表将使用与$list1相同的分隔符(如果它有分隔符),或者使用与$list2相同的分隔符(如果它有分隔符),或者使用空格。不允许使用其他值。

    如果$bracketed为auto(默认),则如果$list1存在,则返回的列表将被括起来。否则,如果$bracketedtrue,则返回的列表将包含方括号;如果$bracketedfalse,则不包含方括号。

    @debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
    @debug list.join((blue, red), (#abc, #def)); // blue, red, #abc, #def
    @debug list.join(10px, 20px); // 10px 20px
    @debug list.join(10px, 20px, $separator: comma); // 10px, 20px
    @debug list.join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
    @debug list.join([10px], 20px); // [10px 20px]
    @debug list.join(10px, 20px, $bracketed: true); // [10px 20px]
    


    list.length()

    list.length($list)
    length($list) //=> number
    

    返回$list的长度。这也可以返回地图映射(maps)中的对数。

    @debug list.length(10px); // 1
    @debug list.length(10px 20px 30px); // 3
    @debug list.length((width: 10px, height: 20px)); // 2
    


    list.separator()

    list.separator($list)
    separator($list) //=> unquoted string
    

    返回$list使用的分隔符的名称,可以是空格、逗号或斜杠。如果$list没有分隔符,则返回空格。

    @debug list.separator(1px 2px 3px); // space
    @debug list.separator(1px, 2px, 3px); // comma
    @debug list.separator('Helvetica'); // space
    @debug list.separator(()); // space
    


    list.nth()

    list.nth($list,$n)
    nth($list,$n)
    

    返回索引$n处的$list元素。如果$n为负,则从$list的末尾开始计算。如果索引$n处没有元素,则抛出错误。


    list.set-nth()

    list.set-nth($list,$n, $value)
    set-nth($list,$n, $value) //=> list
    

    返回索引为$n的元素替换为$value$list的副本。如果$n为负,则从$list的末尾开始计算。如果索引$n处没有现有元素,则抛出错误。

    @debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
    @debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
    @debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto
    


    list.slash()

    list.slash($elements...) //=> list
    

    返回包含$elements元素的斜杠分隔列表。

    ⚠️注意!
    此函数是用于创建斜杠分隔列表的临时解决方案。最终,它们将用斜杠逐字书写,如1px/2px/solid,但目前斜杠用于除法,因此在删除旧语法之前,Sass不能将其用于新语法。
    @debug list.slash(1px, 50px, 100px); // 10px / 50px / 100px
    


    list.zip()

    list.zip($lists...) 
    zip($lists...) //=> list
    

    $lists中的每个列表合并为一个子列表列表。返回的列表中的每个元素都包含$lists中该位置的所有元素。返回的列表与$lists中最短的列表一样长。返回的列表始终以逗号分隔,子列表始终以空格分隔。

    @debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
    @debug list.zip(10px 50px 100px, short mid); // 10px short, 50px mid
    

    上篇:sass:color

    下篇:sass:map