Scss中的自定義函數
一、字符串函數
1、unquote($string): 刪除字符串中的引號
2、quote($string): 給字符串添加引號
注：quote在使用時加上""會避免一些報錯
3、To-upper-cas($string): 字符串小寫字母轉換為大寫字母
4、To-lower-case($string): 字符串大寫字母轉換為小寫字母
// scss
.test1 {
? ? content: unquote(" 'hello world' ");
}
.test2 {
? ? content: quote('hello world');
}
.test3 {
? ? content: quote("hello world");
}
// css
.test1 {? ? content: 'hello world';? }
.test2 {? ? content: "hello world";? }
.test3 {? ? content: "hello world";? }
二、數字函數
1、percentage($value): 將一個不帶單位的數轉換為百分比
2、round($value): 將數值四舍五入，轉換為一個最接近的整數
3、ceil($value): 將大于自己的小數轉換為下一位整數
4、floor($value): 將一個數去除他的小數部分
5、abs($value): 返回一個數的絕對值
6、min($numbers...): 找出幾個數值之間的最小值
7、max($numbers...): 找出幾個數值之間的最大值
8、random(): 獲取隨機數
三、列表函數
1、length($list): 返回一個列表的長度值
2、nth($list,$n): 返回一個列表中指定的某個標簽值
3、join($list1, $list2, [$separator]): 將兩個列表鏈接在一起，變成一個列表
$separator: auto/comma/space; comma表示列表項值之間使用逗號分隔，space表示列表項值之間使用空格分開
4、append($list,$val,[$separator]): 將某個值放在列表的最后
5、zip($lists...): 將幾個列表結合成一個多維的列表
zip(1px 2px 3px,solid dashed dotted,green blue red)
6、index($list,$value): 返回一個值在列表中的位置值
四、introspection函數
1、type-of($value): 返回一個值的類型
2、unit($number): 返回一個值的單位
3、unitless($number): 判斷一個值是否帶有單位
4、comparable($number-1,$number-2): 判斷兩個值是否可以做加、減和合并
五、三元條件函數
if($condition,$if-true,$if-false)
if(true,1px,2px)
=> 1px
六、Map函數
$theme-color: (
? ? default:(
????????background-color: #fff,
????????text-color: #444,
????????link-color: #39f
????),
? ? primary:(
? ??????background-color: #000,
????????text-color: #fff,
? ? ? ? link-color: #93f
????),
? ? negative:(
? ??????background-color: #f36,
????????text-color: #fefefe,
? ? ? ? link-color: #d4e
????)
)
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
