Scss中的自定義函數(shù)
一诞帐、字符串函數(shù)
1唬血、unquote($string): 刪除字符串中的引號(hào)
2、quote($string): 給字符串添加引號(hào)
注：quote在使用時(shí)加上""會(huì)避免一些報(bào)錯(cuò)
3境氢、To-upper-cas($string): 字符串小寫字母轉(zhuǎn)換為大寫字母
4轮洋、To-lower-case($string): 字符串大寫字母轉(zhuǎn)換為小寫字母
// 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";? }
二、數(shù)字函數(shù)
1、percentage($value): 將一個(gè)不帶單位的數(shù)轉(zhuǎn)換為百分比
2暖庄、round($value): 將數(shù)值四舍五入聊替，轉(zhuǎn)換為一個(gè)最接近的整數(shù)
3、ceil($value): 將大于自己的小數(shù)轉(zhuǎn)換為下一位整數(shù)
4培廓、floor($value): 將一個(gè)數(shù)去除他的小數(shù)部分
5惹悄、abs($value): 返回一個(gè)數(shù)的絕對(duì)值
6、min($numbers...): 找出幾個(gè)數(shù)值之間的最小值
7肩钠、max($numbers...): 找出幾個(gè)數(shù)值之間的最大值
8泣港、random(): 獲取隨機(jī)數(shù)
三、列表函數(shù)
1蔬将、length($list): 返回一個(gè)列表的長(zhǎng)度值
2爷速、nth($list,$n): 返回一個(gè)列表中指定的某個(gè)標(biāo)簽值
3、join($list1, $list2, [$separator]): 將兩個(gè)列表鏈接在一起霞怀，變成一個(gè)列表
$separator: auto/comma/space; comma表示列表項(xiàng)值之間使用逗號(hào)分隔惫东，space表示列表項(xiàng)值之間使用空格分開
4、append($list,$val,[$separator]): 將某個(gè)值放在列表的最后
5毙石、zip($lists...): 將幾個(gè)列表結(jié)合成一個(gè)多維的列表
zip(1px 2px 3px,solid dashed dotted,green blue red)
6廉沮、index($list,$value): 返回一個(gè)值在列表中的位置值
四、introspection函數(shù)
1徐矩、type-of($value): 返回一個(gè)值的類型
2滞时、unit($number): 返回一個(gè)值的單位
3、unitless($number): 判斷一個(gè)值是否帶有單位
4滤灯、comparable($number-1,$number-2): 判斷兩個(gè)值是否可以做加坪稽、減和合并
五、三元條件函數(shù)
if($condition,$if-true,$if-false)
if(true,1px,2px)
=> 1px
六鳞骤、Map函數(shù)
$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): 根據(jù)給定的key值，返回map中相關(guān)的值
2豫尽、map-merge($map1,$map2): 將兩個(gè)map合并成一個(gè)新的map
3篙梢、map-remove($map,$key): 從map中刪除一個(gè)key,返回一個(gè)新的map
4、map-keys($map): 返回map中所有的key
5美旧、map-values($map): 返回map中所有的value
6渤滞、map-has-key($map,$key): 根據(jù)給定的key值判斷map是否有對(duì)應(yīng)的value值，如果有返回true榴嗅，否則返回false
7妄呕、keywords($args): 返回函數(shù)的參數(shù)，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置key和value
