Sass関数一覧 function_html/css_WEB-ITnose

リスト関数の概要

リスト関数には、主に次のタイプを含む、リスト パラメーターを使用するいくつかの関数が含まれます。

length($list): リストの長さの値を返します。

nth ($list, $n): リストで指定された特定のタグ値を返します

join($list1, $list2, [$separator]): 2 つの列を結合してリストを形成します ; ️ ;

リスト関数の各関数には独自の役割と機能があります

length() function

length()

この関数は主にリスト内にいくつの値があるかを返すために使用されます簡単に言うと、

はリストに含まれる値の数を返します:

1 >> length(10px)2 13 >> length(10px 20px (border 1px solid) 2em)4 45 >> length(border 1px solid)6 3

length()

関数内のリストパラメータはスペースで区切られており、カンマは使用できません。それ以外の場合、関数はエラーになります:

1 >> length(10px,20px,(border 1px solid),2em)2 SyntaxError: wrong number of arguments (4 for 1) for `length'3 >> length(1,2px)4 SyntaxError: wrong number of arguments (2 for 1) for `length'

nth() function 構文:

nth($list,$n)

nth()

関数は、リスト内の特定の位置の値。 Sass では、

nth()

関数は他の言語とは異なります。

1 はリストの最初のタグ値を参照し、2 はリストの 2 番目のタグ値を参照します。例:

1 >> nth(10px 20px 30px,1)2 10px3 >> nth((Helvetica,Arial,sans-serif),2)4 "Arial"5 >> nth((1px solid red) border-top green,1)6 (1px "solid" #ff0000)

注:

nth($list,$n)

関数の

$n

は 0 より大きい整数である必要があります:

1 >> nth((1px solid red) border-top green 1 ,0)2 SyntaxError: List index 0 must be a non-zero integer for `nth'

参加する( ) functionjoin()

関数は、2つのリストを1つのリストに結合することです。

1 >> join(10px 20px, 30px 40px)2 10px 20px 30px 40px3 >> join((blue,red),(#abc,#def))4 #0000ff, #ff0000, #aabbcc, #ddeeff5 >> join((blue,red),(#abc #def))6 #0000ff, #ff0000, #aabbcc, #ddeeff

ただし、

join()

は 2 つのリストを 1 つのリストにのみ接続できます。3 つ以上のリストを直接接続すると、エラーが報告されます。

しかし、2 つのリストが 1 つのリストに接続される場合、多くの場合、複数の join() 関数を組み合わせる必要があります:

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

しかし、最初のリストにリスト項目が 1 つしかない場合、それぞれの間に使用される区切り文字join() 関数によってマージされたリスト項目内のリスト項目は、2 番目のリスト項目が で区切られている場合は、カンマを使用して区切られます。列項目間に使用されるスペース文字はスペースで区切られます:

1 >> join(blue,(green, orange))2 #0000ff, #008000, #ffa5003 >> join(blue,(green orange))4 #0000ff #008000 #ffa500

2 つのリスト内のリスト項目が 1 未満の場合、それらはスペースで区切られます:

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

When willリスト項目を結合するときは、結合されたリスト項目を区切るためにスペースを使用します。join() 関数を使用してリスト項目を結合する方法を指定するために $separator パラメーターを明示的に指定することをお勧めします。マージされたリスト内のリスト項目を分離するには:

 1 >> join(blue,red,comma) 2 #0000ff, #ff0000 3 >> join(blue,red,space) 4 #0000ff #ff0000 5 >> join((blue green),(red,orange),comma) 6 #0000ff, #008000, #ff0000, #ffa500 7 >> join((blue green),(red,orange),space) 8 #0000ff #008000 #ff0000 #ffa500 9 >> join((blue, green),(red,orange),comma)10 #0000ff, #008000, #ff0000, #ffa50011 >> join((blue, green),(red,orange),space)12 #0000ff #008000 #ff0000 #ffa50013 >> join(blue,(red,orange),comma)14 #0000ff, #ff0000, #ffa50015 >> join(blue,(red,orange),space)16 #0000ff #ff0000 #ffa50017 >> join(blue,(red orange),comma)18 #0000ff, #ff0000, #ffa50019 >> join(blue,(red orange),space)20 #0000ff #ff0000 #ffa500

append() 関数

append() 関数は、リストの最後の位置に値を挿入するために使用されます。

1 >> append(10px 20px ,30px)2 10px 20px 30px3 >> append((10px,20px),30px)4 (10px, 20px, 30px)5 >> append(green,red)6 #008000 #ff00007 >> append(red,(green,blue))8 #ff0000 #008000, #0000ff

$separator パラメータ値が明示的に指定されていない場合、デフォルト値は auto です。

リストにリスト項目が 1 つだけある場合、挿入された値は元の値からスペースで区切られます。

リスト内のリスト項目がスペースで区切られている場合、挿入されたリスト項目もスペースで区切られます。

リスト内のリスト項目がカンマで区切られている場合、挿入されたリスト項目もカンマで区切られます。

append() 関数では、$separator パラメーターを明示的に設定できます。 値がカンマの場合、リスト項目はカンマで区切られます。
値がスペースの場合、リスト項目はスペースで区切られます。

 1 >> append((blue green),red,comma) 2 #0000ff, #008000, #ff0000 3 >> append((blue green),red,space) 4 #0000ff #008000 #ff0000 5 >> append((blue, green),red,comma) 6 #0000ff, #008000, #ff0000 7 >> append((blue, green),red,space) 8 #0000ff #008000 #ff0000 9 >> append(blue,red,comma)10 #0000ff, #ff000011 >> append(blue,red,space)12 #0000ff #ff0000

zip() 関数

zip() 関数は、複数のリスト値を多次元リストに変換します:

1 >> zip(1px 2px 3px,solid dashed dotted,green blue red)2 1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000

在使用zip()函数时，每个单一的列表个数值必须是相同的：
|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
| List1 | 1px | 2px | 3px |
|------------|--------------|--------------|--------------|
| List2 | solid | dashed | dotted |
|------------|--------------|--------------|--------------|
| List3 | green | blue | red |
|------------|--------------|--------------|--------------|
zip()函数组合出来就成了：

1px solid green, 2px dashed blue, 3px dotted red

 

 

 

index()函数
index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在 Sass 中，第一个值就是1，第二个值就是 2，依此类推：

1 >> index(1px solid red, 1px)2 13 >> index(1px solid red, solid)4 25 >> index(1px solid red, red)6 3

在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。

1 >> index(1px solid red,dotted) //列表中没有找到 dotted2 false3 >> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 24 2

 

 

 

Introspection函数

Introspection函数包括了几个判断型函数：

type-of($value)：返回一个值的类型

unit($number)：返回一个值的单位；

unitless($number)：判断一个值是否带有带位

comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

 

 

 

Introspection 函数 -type-of()
type-of()函数主要用来判断一个值是属于什么类型：

返回值：

number 为数值型。

string 为字符串型。

bool 为布尔型。

color 为颜色型。

 1 >> type-of(100) 2 "number" 3 >> type-of(100px) 4 "number" 5 >> type-of("asdf") 6 "string" 7 >> type-of(asdf) 8 "string" 9 >> type-of(true)10 "bool"11 >> type-of(false)12 "bool"13 >> type-of(#fff)14 "color"15 >> type-of(blue)16 "color"17 >> type-of(1 / 2 = 1)18 "string"

 

 

 

unit()函数
unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

 1 >> unit(100) 2 "" 3 >> unit(100px) 4 "px" 5 >> unit(20%) 6 "%" 7 >> unit(1em) 8 "em" 9 >> unit(10px * 3em)10 "em*px"11 >> unit(10px / 3em)12 "px/em"13 >> unit(10px * 2em / 3cm / 1rem)14 "em/rem"

但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外：

 1 >> unit(1px + 1cm) 2 "px" 3 >> unit(1px - 1cm) 4 "px" 5 >> unit(1px + 1mm) 6 "px" 7 >> unit(10px * 2em - 3cm / 1rem) 8 SyntaxError: Incompatible units: 'cm' and 'px*em'. 9 >> unit(10px * 2em - 1px / 1rem)10 SyntaxError: Incompatible units: '' and 'em'.11 >> unit(1px - 1em)12 SyntaxError: Incompatible units: 'em' and 'px'.13 >> unit(1px - 1rem)14 SyntaxError: Incompatible units: 'rem' and 'px'.15 >> unit(1px - 1%)16 SyntaxError: Incompatible units: '%' and 'px'.17 >> unit(1cm + 1em)18 SyntaxError: Incompatible units: 'em' and 'cm'.

unit() 函数对于单位运算相对来说也没有规律，而且有些单位也无法整合成一个单位，对于我们在 CSS 中运用中并不适合，比如：

1 >> unit(10px * 3em)2 "em*px"3 >> unit(10px / 3em)4 "px/em"5 >> unit(10px * 2em / 3cm / 1rem)6 "em/rem"

上面运算出来的单位，对于在 CSS 中使用将是没有任何意义的。

 

 

 

unitless()函数
unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false：

 1 >> unitless(100) 2 true 3 >> unitless(100px) 4 false 5 >> unitless(100em) 6 false 7 >> unitless(100%) 8 false 9 >> unitless(1 /2 )10 true11 >> unitless(1 /2 + 2 )12 true13 >> unitless(1px /2 + 2 )14 false

代码实现：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位。

 1 @mixin adjust-location($x, $y) { 2  @if unitless($x) {  3  $x: 1px * $x; 4     } 5  @if unitless($y) {  6  $y: 1px * $y; 7     } 8  position: relative;  9  left: $x; 10  top: $y;11 }12 .botton{13  @include adjust-location(20px, 30);14 }

编译过来的CSS：

1 .botton {2  position: relative;3  left: 20px;4  top: 30px; 5 }

 

 

 

comparable()函数
comparable()函数主要是用来判断连个数是否可以进行“加，减”以及“合并”。如果可以返回的值为true，如果不可以返回的值是false:

 1 >> comparable(2px,1px) 2 true 3 >> comparable(2px,1%) 4 false 5 >> comparable(2px,1em) 6 false 7 >> comparable(2rem,1em) 8 false 9 >> comparable(2px,1cm)10 true11 >> comparable(2px,1mm)12 true13 >> comparable(2px,1rem)14 false15 >> comparable(2cm,1mm)16 true

 

 

 

Miscellaneous函数
在这里吧Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

上面表达式的意思是当$condition条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。

1 >> if(true,1px,2px)2 1px3 >> if(false,1px,2px)4 2px