scss值列表 sass列表函式

2021-10-13 09:10:28 字數 2432 閱讀 2120

join() 函式是將兩個列表連線合併成乙個列表。

>> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((blue,red),(#abc,#def)) (#0000ff, #ff0000, #aabbcc, #ddeeff) >> join((blue,red),(#abc #def)) (#0000ff, #ff0000, #aabbcc, #ddeeff)

不過 join() 只能將兩個列表連線成乙個列表,如果直接連線兩個以上的列表將會報錯:

>> join((blue red),(#abc, #def),(#dee #eff)) syntaxerror: $separator: (#ddeeee #eeffff) is not a string for `join'

但很多時候不只碰到兩個列表連線成乙個列表,這個時候就需要將多個 join() 函式合併在一起使用:

>> join((blue red), join((#abc #def),(#dee #eff))) (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在 join() 函式中還有乙個很特別的引數 $separator,這個引數主要是用來給列表函式連線列表值是,使用的分隔符號,預設值為 auto。

join() 函式中 $separator 除了預設值 auto 之外,還有 comma 和 space 兩個值,其中 comma 值指定列表中的列表項值之間使用逗號(,)分隔,space 值指定列表中的列表項值之間使用空格( )分隔。

在 join() 函式中除非明確指定了 $separator值,否則將會有多種情形發生:

如果列表中的第乙個列表中每個值之間使用的是逗號(,),那麼 join() 函式合併的列表中每個列表項之間使用逗號,分隔:

>> join((blue, red, #eff),(green orange)) (#0000ff, #ff0000, #eeffff, #008000, #ffa500)

但當第乙個列表中只有乙個列表項,那麼 join() 函式合併的列表專案中每個列表專案這間使用的分隔符號會根據第二個列表項中使用的,如果第二列表項中使用是,分隔,則使用逗號分隔;如果第二列項之間使用的空格符,則使用空格分隔:

>> join(blue,(green, orange)) (#0000ff, #008000, #ffa500) >> join(blue,(green orange)) (#0000ff #008000 #ffa500)

如果列表中的第乙個列表中每個值之間使用的是空格,那麼 join() 函式合併的列表中每個列表項之間使用空格分隔:

>> join((blue green),(red,orange)) (#0000ff #008000 #ff0000 #ffa500) >> join((blue green),(red orange)) (#0000ff #008000 #ff0000 #ffa500)

如果當兩個列表中的列表項小於1時,將會以空格分隔:

>> join(blue,red) (#0000ff #ff0000)

如此一來,會有多種情形發生,造成使用混亂的情形,如果你無法記得,什麼時候會是用逗號分隔合併的列表項,什麼時候是使用空格分隔合併 的列表項,在些建議大家使用 join() 函式合併列表項的時候就明確指定 $separator 引數,用來指定合併的列表中使用什麼方式來分隔列表項:

>> join(blue,red,comma)

(#0000ff, #ff0000)

>> join(blue,red,space)

(#0000ff #ff0000)

>> join((blue green),(red,orange),comma)

(#0000ff, #008000, #ff0000, #ffa500)

>> join((blue green),(red,orange),space)

(#0000ff #008000 #ff0000 #ffa500)

>> join((blue, green),(red,orange),comma)

(#0000ff, #008000, #ff0000, #ffa500)

>> join((blue, green),(red,orange),space)

(#0000ff #008000 #ff0000 #ffa500)

>> join(blue,(red,orange),comma)

(#0000ff, #ff0000, #ffa500)

>> join(blue,(red,orange),space)

(#0000ff #ff0000 #ffa500)

>> join(blue,(red orange),comma)

(#0000ff, #ff0000, #ffa500)

>> join(blue,(red orange),space)

(#0000ff #ff0000 #ffa500)

scss值列表 SCSS筆記1 變數

名詞解釋 li 包起來,表示這是個變數名。字串變數 變數的值如果是字串,一定要用單引號引起來,儘管不引起來也不會出錯。單引號引起來是為了能一眼認出這是變數的值而且是字串值,而不是普通屬性的值。唯一例外是css中類似initial或sans serif的識別符號無須引用起來。乙個最典型的例子 bord...

Sass函式 值列表index

ndex 函式類似於索引一樣,主要讓你找到某個值在列表中所處的位置。在 sass 中,第乙個值就是1,第二個值就是 2,依此類推 index 1px solid red,1px 1 index 1px solid red,solid 2 index 1px solid red,red 3 在 ind...

Sass函式 列表函式nth

語法 nth list,n nth 函式用來指定列表中某個位置的值。不過在 sass 中,nth 函式和其他語言不同,1 是指列表中的第乙個標籤值,2 是指列給中的第二個標籤值,依此類推。如 nth 10px 20px 30px,1 10px nth helvetica,arial,sans ser...