-
index()函數 index() 函數類似于索引一樣，主要讓你找到某個值在列表中所處的位置。在 Sass 中，第一個值就是1，第二個值就是 2，依此類推： >> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3 在 index() 函數中，如果指定的值不在列表中（沒有找到相應的值），那么返回的值將是 false，相反就會返回對應的值在列表中所處的位置。 >> index(1px solid red,dotted) //列表中沒有找到 dotted false >> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 2 2查看全部
-
zip()函數 zip()函數將多個列表值轉成一個多維的列表： >> zip(1px 2px 3px,solid dashed dotted,green blue red) 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查看全部
-
append()函數 append()函數是用來將某個值插入到列表中，并且處于最末位。 >> append(10px 20px ,30px) 10px 20px 30px >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) #008000 #ff0000 >> append(red,(green,blue)) #ff0000 #008000, #0000ff 如果沒有明確的指定 $separator 參數值，其默認值是 auto。 如果列表只有一個列表項時，那么插入進來的值將和原來的值會以空格的方式分隔。 如果列表中列表項是以空格分隔列表項，那么插入進來的列表項也將以空格分隔； 如果列表中列表項是以逗號分隔列表項，那么插入進來的列表項也將以逗號分隔。 當然，在 append() 函數中，可以顯示的設置 $separator 參數， 如果取值為 comma 將會以逗號分隔列表項 如果取值為 space 將會以空格分隔列表項 >> append((blue green),red,comma) (#0000ff, #008000, #ff0000) >> append((blue green),red,space) #0000ff #008000 #ff0000 >> append((blue, green),red,comma) #0000ff, #008000, #ff0000 >> append((blue, green),red,space) (#0000ff #008000 #ff0000) >> append(blue,red,comma) #0000ff, #ff0000 >> append(blue,red,space) #0000ff #ff0000查看全部
-
join()函數 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() 函數合并在一起使用： >> join((blue red), join((#abc #def),(#dee #eff))) (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff) 但當第一個列表中只有一個列表項，那么 join() 函數合并的列表項目中每個列表項目這間使用的分隔符號會根據第二個列表項中使用的，如果第二列表項中使用是,分隔，則使用逗號分隔；如果第二列項之間使用的空格符，則使用空格分隔： >> join(blue,(green, orange)) (#0000ff, #008000, #ffa500) >> join(blue,(green orange)) (#0000ff #008000 #ffa500) 如果當兩個列表中的列表項小于1時，將會以空格分隔： >> join(blue,red) (#0000ff #ff0000) 什么時候會是用逗號分隔合并的列表項，什么時候是使用空格分隔合并 的列表項，在些建議使用 join() 函數合并列表項的時候就明確指定 $separator 參數，用來指定合并的列表中使用什么方式來分隔列表項：查看全部
-
nth()函數 語法： nth($list,$n) nth()函數用來指定列表中某個位置的值。在Sass中，nth()函數和其他語言不同，1是指列表中的第一個標簽值，2是指列表中的第二個標簽值，依此類推。如： >> nth(10px 20px 30px,1) 10px >> nth((Helvetica,Arial,sans-serif),2) "Arial" >> nth((1px solid red) border-top green,1) (1px "solid" #ff0000) 注：在 nth($list,$n) 函數中的 $n 必須是大于 0 的整數： >> nth((1px solid red) border-top green 1 ,0) SyntaxError: List index 0 must be a non-zero integer for `nth'查看全部
-
length()函數 length()函數主要用來返回一個列表中有幾個值，簡單點說就是返回列表清單中有多少個值： >> length(10px) 1 >> length(10px 20px (border 1px solid) 2em) 4 >> length(border 1px solid) 3 length() 函數中的列表參數之間使用空格隔開，不能使用逗號，否則函數將會出錯： >> length(10px,20px,(border 1px solid),2em) SyntaxError: wrong number of arguments (4 for 1) for `length' >> length(1,2px) SyntaxError: wrong number of arguments (2 for 1) for `length'查看全部
-
列表函數簡介 列表函數主要包括一些對列表參數的函數使用，主要包括： length($list)：返回一個列表的長度值； nth($list,$n)：返回一個列表中指定的某個標簽值 join($list1,$list2,[$separator])：將兩個列給連接在一起，變成一個列表； append($list1,$val,[$separator])：將某個值放在列表的最后； zip($lists...)：將幾個列表結合成一個多維的列表； index($list,$value)：返回一個值在列表中的位置值。 列表函數中的每個函數都有其獨特的作用與功能查看全部
-
數字函數-random()函數 random()函數是用來獲取一個隨機數： >> random() 0.03886 >> random() 0.66527 >> random() 0.8125 >> random() 0.26839 >> random() 0.85063查看全部
-
數字函數-min()函數、max()函數 min()函數 min()函數功能主要是在多個數之中找到最小的一個，這個函數可以設置任意多個參數： >> min(1,2,1%,3,300%) 1% >> min(1px,2,3px) 1px >> min(1em,2em,6em) 1em 不過在 min() 函數中同時出現兩種不同類型的單位，將會報錯誤信息： >> min(1px,1em) SyntaxError: Incompatible units: 'em' and 'px'. max()函數 max() 函數和 min() 函數一樣，不同的是，max() 函數用來獲取一系列數中的最大那個值： >> max(1,5) 5 >> max(1px,5px) 5px 同樣的，如果在 max() 函數中有不同單位，將會報錯： >> max(1,3px,5%,6) SyntaxError: Incompatible units: '%' and ‘px'.查看全部
-
數字函數-abs()函數 abs()函數會返回一個數的絕對值。 >> abs(10) 10 >> abs(-10) 10 >> abs(-10px) 10px >> abs(-2em) 2em >> abs(-.5%) 0.5% >> abs(-1px / 2px) 0.5 .footer { width:abs(-12.3px); } 編譯后的CSS： .footer { width: 12.3px; }查看全部
-
數字函數-floor()函數 floor()函數剛好與ceil()函數功能相反，其主要將一個數去除其小數部分，并且不做任何的進位。也就是只做舍，不做入的計算： >> floor(2.1) 2 >> floor(2.5) 2 >> floor(3.5%) 3% >> floor(10.2px) 10px >> floor(10.8em) 10em >> floor(2px / 10px) 0 >> floor(3px / 1em) 3px/em .footer { width:floor(12.3px); } 編譯后的CSS： .footer{ width:12px; }查看全部
-
數字函數-ceil()函數 ceil()函數將一個數轉換成最接近于自己的整數，會將一個大于自身的任何小數轉換成大于本身1的整數。也就是做入，不會舍的計算： >> ceil(2.0) 2 >> ceil(2.1) 3 >> ceil(2.6) 3 >> ceil(2.3%) 3% >> ceil(2.3px) 3px >> ceil(2.5px) 3px >> ceil(2px / 3px) 1 >> ceil(2% / 3px) 1%/px >> ceil(1em / 5px) 1em/px .footer { width:ceil(12.3px); } 編譯后的CSS: .footer{ width:13px; }查看全部
-
數字函數-round()函數 round()函數可以將一個數四舍五入為一個最接近的整數： >> round(12.3) 12 >> round(12.5) 13 >> round(1.49999) 1 >> round(2.0) 2 >> round(20%) 20% >> round(2.2%) 2% >> round(3.9em) 4em >> round(2.3px) 2px >> round(2px / 3px) 1 >> round(1px / 3px) 0 >> round(3px / 2em) 2px/em .footer{ width:round(12.3px); } 編譯后的CSS： .footer{ width:12px; } 在round() 函數中可以攜帶單位的任何數值。查看全部
-
數字函數-percentage() 1、percentage()函數主要是將一個不帶單位的數字轉換成百分比形式： >> percentage(.2) 20% >> percentage(2px / 10px) 20% >> percentage(2em / 10em) 20% .footer{ width:percentage(.2) } 編譯后的CSS： .footer{ width:20%; } 轉換的值是一個帶有單位的值，那么在編譯的時候會報錯誤信息查看全部
-
數字函數簡介 Sass中的數字函數提要針對數字方面提供一系列函數功能： percentage（$value）：將一個不帶單位的數轉換成百分比值； round($value)：將數值四舍五入，轉換成一個接近的整數； ceil($value)：將大于自己的小數轉換成下一位整數； floor($value)：將一個數去除他的小數部分； abs($value)：返回一個數的絕對值； min($numbers...)：找出幾個數值之間的最小值； max($numbers...)：找出幾個數值之間的最大值； random()：獲取隨機數；查看全部
舉報
0/150
提交
取消