Sass 基本函數

標籤：

Sass 中的常用函數

一、字串函數

　　1. unquote($string): 刪除字串前後的引號,刪除一對引號,如果這個字串沒有帶有引號，將返回原始的字串。

　　　　樣本:

.text1 {    content: unquote("‘hello‘");}

 

　　2. quote($string): 給字串添加引號，而且字串中間有單引號或者空格時，需要用單引號或雙引號括起，否則編譯的時候將會報錯(解決方案就是去掉空格，或者加上引號)。同時 quote() 碰到特殊符號，比如： !、?、> 等，除中折號 - 和 底線_ 都需要使用雙引號括起，否則編譯器在進行編譯的時候同樣會報錯.

　　　　樣本:

.text2 {    content: quote(hello-word);}

 

　　3. 大小寫轉換

　　　　to-upper-case($string);//轉大寫
         　to-lower-case($string);//轉小寫

　　樣本:

.text3 {    text: to-upper-case(aAaA);    text: to-lower-case(aAaA);}

 

二、 數字函數

　 　　1. percentage($value)：將一個不帶單位的數轉換成百分比值；
    　　2. round($value)：將數值四捨五入，轉換成一個最接近的整數，可以帶單位；
    　　3. ceil($value)：向上舍入為整數，可以帶單位；
    　　4. floor($value)：將一個數去除他的小數部分，可以帶單位；
    　　5. abs($value)：返回一個數的絕對值，可以帶單位；
   　　 6. min($numbers…)：找出幾個數值之間的最小值，可以帶同類型單位；
    　　7. max($numbers…)：找出幾個數值之間的最大值，可以帶同類型單位；
    　　8. random(): 擷取隨機數

　　樣本:

 1 .header { 2     width: percentage(.2);//20% 3     height: percentage(2px / 3px);//66.66667% 4  5     margin: round(3.2px);//3px 6  7     padding: ceil(2.1px);//3px 8  9     border-width: floor(3.9px);//3px10 11     font-size: abs(-10px);//10px12 13     top: min(5px, 10px, 20px, 2px);//2px14     left: max(5px, 10px, 20px, 2px);//20px15 16     border-radius: floor(random()*10px);//這個值真是不知道怎麼說17 }

 

三、 列表函數

　 　　1. length($list)：返回一個列表的長度值,函數中的列表參數之間使用空格隔開，不能使用逗號，否則函數將會出錯;
    　　2. nth($list, $n)：返回一個列表中指定的某個標籤值,索引從1開始，$n必須大於0，不然報錯(SyntaxError: List index 0 must be a non-zero integer for `nth‘)
    　　3. join($list1, $list2, [$separator])：將兩個列給串連在一起，變成一個列表；
    　　4. append($list1, $val, [$separator])：將某個值放在列表的最後；
    　　5. zip($lists…)：將幾個列表結合成一個多維的列表；
    　　6. index($list, $value)：返回一個值在列表中的位置值。

　　樣本:

$list:1px,2px,3px,4px,5px;h1 {    font-size: length($list);//5    line-height: nth($list,3);    margin: index($list,5px);}

 

　　輸出:

1 h1 {2   font-size: 5;3   line-height: 3px;4   margin: 5; }

 

　　　　join() 只能將兩個列表串連成一個列表，如果直接連接兩個以上的列表將會報錯(SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join‘)
    選擇性參數 $separator; 定義列表元素的分隔字元;預設auto 自動識別；comma 使用,分割；space 使用空格分隔；

　　樣本:

 1 h2 { 2     content: join($list,(6px,7px,8px),space);//返回新字串 3 } 4 h3 { 5     content: append($list,9px); 6 } 7 h4{ 8     //zip()函數中每個單一列表的值對應的取其相同位置值： 9     content: zip((1px 2px 3px),(solid dashed dotted),(green blue red));10 }

 

　　輸出:

1 h2 {2   content: 1px 2px 3px 4px 5px 6px 7px 8px; }3 4 h3 {5   content: 1px, 2px, 3px, 4px, 5px, 9px; }6 7 h4 {8   content: 1px solid green, 2px dashed blue, 3px dotted red; }

 

四、 Introspection函數 包含幾個判斷類型函數

　　　　1. type-of($value)：返回一個值的類型
       　　 　傳回值：
            　　number 為數值型。
            　　string 為字串型。
            　　bool 為布爾型。
            　　color 為顏色型。
    　　2. unit($number)：返回一個值的單位；
    　　3. unitless($number)：判斷一個值是否帶有單位，不帶返回true，帶單位返回false
    　　4. comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合并；可以返回true，不可以反悔false

　　樣本:

h1{    content: type-of(true);//bool}

 

五、 Miscellaneous 函數

　　三元條件函數，他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值：if($condition,$if-true,$if-false)

　　樣本:

.text4 {    padding: if(true,2px,3px);}

 

　　輸出:

.text4 {  padding: 2px; }

 

六、 map 類型

　　Sass中的map 常常被稱為資料地圖，又有人稱其為數組，應為他總是以 key:value 成對出現，更像是一個JSON資料

　　樣本:

$color: (    default: #fff,    primary: #22ae39,    negative: #d9534f    );

 

 　map 的函數功能。Sass中map內建七個函數
  　　1. map-get($map, $key): 根據key值，返回map中的相關的值
  　　2. map-merge($map1, $map2): 將兩個 map 合并成一個新的 map
  　　3. map-remove($map, $key): 從map中刪除一個key，返回一個新的map
  　　4. map-keys($map): 返回 map 中所有的key
  　　5. map-values($map): 返回 map 中所有的value
  　　6. map-has-key($map, $key): 根據給定的 key 值判斷map是否有對應的value值，如果有返回true，否則返回false
  　　7. keywords($args): 返回一個函數的參數，這個參數可以動態設定key和value

　　map-get($map, $key) 樣本:

 1 $social-colors: ( 2         dribble: #ea4c89, 3         facebook: #3b5998, 4         github: #171515, 5         google: #db4437, 6         twitter: #55acee 7     ); 8 .btn-dribble{ 9     color: map-get($social-colors, facebook);10       //如果 $key 不在 $map 中，不會編譯出 CSS，其實 map-get 返回了一個 null 值。11       background-color: map-get($social-colors, weibo);12 }

 

/** map-get($map, $key) 樣本*/.btn-dribble {  color: #3b5998; }

 

　　map-has-key($map, $key) 樣本:

 1 /*定義一個函數判斷 $key 是否在 $map 中 否則報錯*/ 2 @function colors($color){ 3     @if not map-has-key($social-colors, $color){ 4         @warn "No color found for #{$color} in $social-colors map. Property omitted."; 5     } 6     @return map-get($social-colors, $color); 7 } 8  9 .btn-dribble {10     color: colors(dribble);11 }12 .btn-facebook {13     color: colors(facebooks);14 }

 

　　輸出:

.btn-dribble {  color: #ea4c89; }

 

Sass 基本函數