scss-函數(shù)

Shisui 發(fā)布于2019-04-23 13:15 / 2503人閱讀

摘要：本身帶有大量的內(nèi)置函數(shù)，具體可以參閱官網(wǎng)函數(shù)模塊。語法開頭聲明一個(gè)函數(shù)，函數(shù)內(nèi)部使用返回一個(gè)值，參數(shù)可以省略。是一個(gè)內(nèi)置函數(shù)，可以從列表中找到對(duì)應(yīng)索引的值索引是從開始的，與大多數(shù)編程語言從開始不同。

　　在scss中除了可以定義變量，具有@extend和@mixins等特性之外，還自備了一系列的函數(shù)功能。

　　scss本身帶有大量的內(nèi)置函數(shù)，具體可以參閱官網(wǎng)函數(shù)模塊。

　　一、字符串函數(shù)

unquote($string)：只能刪除字符串最前和最后的引號(hào)（雙引號(hào)或單引號(hào)），而無法刪除字符串中間的引號(hào)。如果字符沒有帶引號(hào)，返回的將是字符串本身。
quote($string)：只能給字符串增加雙引號(hào)，而且字符串中間有單引號(hào)或者空格時(shí)，需要用單引號(hào)或雙引號(hào)括起，否則編譯的時(shí)候?qū)?huì)報(bào)錯(cuò)。

　　二、數(shù)字函數(shù)

percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值，如果轉(zhuǎn)換的值是一個(gè)帶有單位的值，那么在編譯的時(shí)候會(huì)報(bào)錯(cuò)誤信息：
round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)，可以攜帶單位的任何數(shù)值。
ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)；將一個(gè)數(shù)轉(zhuǎn)換成最接近于自己的整數(shù)，會(huì)將一個(gè)大于自身的任何小數(shù)轉(zhuǎn)換成大于本身1的整數(shù)。也就是只做入，不做舍的計(jì)算
floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分；floor()函數(shù)剛好與ceil()函數(shù)功能相反，其主要將一個(gè)數(shù)去除其小數(shù)部分，并且不做任何的進(jìn)位。也就是只做舍，不做入的計(jì)算
abs($value)：返回一個(gè)數(shù)的絕對(duì)值；
min($numbers…)：找出幾個(gè)數(shù)值之間的最小值；
max($numbers…)：找出幾個(gè)數(shù)值之間的最大值。

　　三、List函數(shù)

length($list)：返回一個(gè)列表的長(zhǎng)度值；
nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值
join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表；
append($list1, $val, [$separator])：將某個(gè)值放在列表的最后；
zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表；
index($list, $value)：返回一個(gè)值在列表中的位置值。

　　四、自定義函數(shù)

　　可能有時(shí)候，內(nèi)置的函數(shù)并不能夠完全滿足我們的需求，那么我們也自定義函數(shù)。

　　語法：

@function function-name($args) { 
  @return value-to-be-returned; 
}

　　@function開頭聲明一個(gè)函數(shù)，函數(shù)內(nèi)部使用@return返回一個(gè)值，參數(shù)可以省略?？傮w來講scss中的函數(shù)和JavaScript中的函數(shù)大同小異，并且具備某些ES2015函數(shù)的特點(diǎn)。函數(shù)可以放置在想要使用函數(shù)返回值的地方，scss代碼實(shí)例如下

div { 
  font-size: font-size($args); 
}

　　特別說明:scss函數(shù)名中的中劃線和下劃線是等同的，font-size和font_size指向同一個(gè)函數(shù)。

@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

　　編譯后的css代碼如下：

.col-3 {
  width: 37.5%;
}

　　默認(rèn)參數(shù):scss代碼實(shí)例如下:

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(); 
}

　　參數(shù)名稱后面跟著一個(gè)冒號(hào)，冒號(hào)后面就是規(guī)定的默認(rèn)參數(shù)值；函數(shù)調(diào)用時(shí)，對(duì)應(yīng)的參數(shù)沒有傳遞值，那么就使用默認(rèn)參數(shù)值，上面代碼編譯結(jié)果如下:

.col-3 {
  width: 37.5%;
}

　　再來看一段scss代碼實(shí)例:

@function column-width($col:3, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　上面的代碼會(huì)報(bào)錯(cuò)，函數(shù)調(diào)用時(shí)只傳遞了一個(gè)參數(shù)，但是函數(shù)聲明時(shí)規(guī)定了兩個(gè)參數(shù)，并且第二個(gè)參數(shù)沒有默認(rèn)值，也就是說函數(shù)調(diào)用時(shí)所傳遞的參數(shù)必須和聲明時(shí)規(guī)定的參數(shù)對(duì)應(yīng)起來。

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　傳遞的參數(shù)會(huì)覆蓋默認(rèn)的參數(shù)，所以4會(huì)覆蓋3，第二個(gè)參數(shù)使用默認(rèn)值。編譯結(jié)果如下:

.col-3 {
  width: 50%;
}

　　函數(shù)rest參數(shù):

　　給函數(shù)傳遞的參數(shù)個(gè)數(shù)也許不是固定的，或者不能預(yù)知為函數(shù)傳遞參數(shù)的個(gè)數(shù)。代碼實(shí)例如下:

@function column-width($index, $widths...){ 
  @return nth($widths, $index); 
}
.col-3 { 
  width: column-width(3, 25%, 50%, 75%, 100%); 
}

　　rest參數(shù)的形式是參數(shù)名稱后面跟三個(gè)點(diǎn)。上面代碼中，3會(huì)傳遞給$index，后面的剩余參數(shù)會(huì)都傳遞給$widths（$widths生成一個(gè)list列表）。nth()是一個(gè)內(nèi)置函數(shù)，可以從列表中找到對(duì)應(yīng)索引的值（索引是從1開始的，與大多數(shù)編程語言從0開始不同）。上面代碼編譯結(jié)果如下:

.col-3 {
  width: 75%;
}

?　　文本超出范圍，顯示省略號(hào)

/*文本格式化，超出范圍，顯示省略號(hào)*/
@mixin text-overflow($width:100%,$display:block) {
  width: $width;
  display: $display;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

　　調(diào)用@include text-overflow();也可以自己傳入?yún)?shù)，display為block或inline-block才能達(dá)到預(yù)期的效果

　　編譯的css代碼如下：

    width: 100%;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;

GPU云服務(wù)器云服務(wù)器 SCSS html5 scss 函數(shù)中定義函數(shù) php函數(shù)與函數(shù)調(diào)用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1628.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Shisui

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow2

閱讀 840·2023-04-26 00:13
云測(cè)速在線測(cè)速工具 – 騰訊云、阿里云等ping、節(jié)點(diǎn)、地域測(cè)試等測(cè)速

閱讀 2885·2021-11-23 10:08
#推薦# contabo：€4.99/月/8g內(nèi)存/4核/300gSSD/不限流量+快照+Windo

閱讀 2463·2021-09-01 10:41
《HelloGitHub》第 65 期

閱讀 2127·2021-08-27 16:25
Nextcloud個(gè)人云存儲(chǔ)絕佳選擇：一鍵自動(dòng)安裝方法和云盤使用體驗(yàn)

閱讀 4221·2021-07-30 15:14
CSS 提示工具(Tooltip)

閱讀 2375·2019-08-30 15:54
Are you sure you understand the responsive layout？

閱讀 873·2019-08-29 16:22
漫畫：程序員的“情人”節(jié)應(yīng)該這樣度過

閱讀 2754·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

scss-函數(shù)

相關(guān)文章

**前端之Sass/Scss實(shí)戰(zhàn)筆記**

**CSS外掛：Sass的那些裝逼函數(shù)(function)**

挑逗Bootstrap4源代碼 - Grid篇（上）

SASS知識(shí)點(diǎn)

**CSS、Sass、Scss，以及sass和scss的區(qū)別**

發(fā)表評(píng)論

0條評(píng)論

Shisui

男|高級(jí)講師

TA的文章

tensorflow2

云測(cè)速在線測(cè)速工具 – 騰訊云、阿里云等ping、節(jié)點(diǎn)、地域測(cè)試等測(cè)速

#推薦# contabo：€4.99/月/8g內(nèi)存/4核/300gSSD/不限流量+快照+Windo

《HelloGitHub》第 65 期

Nextcloud個(gè)人云存儲(chǔ)絕佳選擇：一鍵自動(dòng)安裝方法和云盤使用體驗(yàn)

CSS 提示工具(Tooltip)

Are you sure you understand the responsive layout？

漫畫：程序員的“情人”節(jié)應(yīng)該這樣度過

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

scss-函數(shù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！