摘要:本身帶有大量的內(nèi)置函數(shù),具體可以參閱官網(wǎng)函數(shù)模塊。語法開頭聲明一個函數(shù),函數(shù)內(nèi)部使用返回一個值,參數(shù)可以省略。是一個內(nèi)置函數(shù),可以從列表中找到對應(yīng)索引的值索引是從開始的,與大多數(shù)編程語言從開始不同。
在scss中除了可以定義變量,具有@extend和@mixins等特性之外,還自備了一系列的函數(shù)功能。
scss本身帶有大量的內(nèi)置函數(shù),具體可以參閱官網(wǎng)函數(shù)模塊。
?
一、字符串函數(shù)
?
二、數(shù)字函數(shù)
?
三、List函數(shù)
四、自定義函數(shù)
可能有時候,內(nèi)置的函數(shù)并不能夠完全滿足我們的需求,那么我們也自定義函數(shù)。
語法:
@function function-name($args) { @return value-to-be-returned; }
@function開頭聲明一個函數(shù),函數(shù)內(nèi)部使用@return返回一個值,參數(shù)可以省略。總體來講scss中的函數(shù)和JavaScript中的函數(shù)大同小異,并且具備某些ES2015函數(shù)的特點。函數(shù)可以放置在想要使用函數(shù)返回值的地方,scss代碼實例如下
div { font-size: font-size($args); }
特別說明:scss函數(shù)名中的中劃線和下劃線是等同的,font-size和font_size指向同一個函數(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代碼實例如下:
@function column-width($col:3, $total:8) { @return percentage($col/$total); } .col-3 { width: column-width(); }
參數(shù)名稱后面跟著一個冒號,冒號后面就是規(guī)定的默認(rèn)參數(shù)值;函數(shù)調(diào)用時,對應(yīng)的參數(shù)沒有傳遞值,那么就使用默認(rèn)參數(shù)值,上面代碼編譯結(jié)果如下:
.col-3 { width: 37.5%; }
再來看一段scss代碼實例:
@function column-width($col:3, $total) { @return percentage($col/$total); } .col-3 { width: column-width(4); }
上面的代碼會報錯,函數(shù)調(diào)用時只傳遞了一個參數(shù),但是函數(shù)聲明時規(guī)定了兩個參數(shù),并且第二個參數(shù)沒有默認(rèn)值,也就是說函數(shù)調(diào)用時所傳遞的參數(shù)必須和聲明時規(guī)定的參數(shù)對應(yīng)起來。
@function column-width($col:3, $total:8) { @return percentage($col/$total); } .col-3 { width: column-width(4); }
傳遞的參數(shù)會覆蓋默認(rèn)的參數(shù),所以4會覆蓋3,第二個參數(shù)使用默認(rèn)值。編譯結(jié)果如下:
.col-3 { width: 50%; }
函數(shù)rest參數(shù):
給函數(shù)傳遞的參數(shù)個數(shù)也許不是固定的,或者不能預(yù)知為函數(shù)傳遞參數(shù)的個數(shù)。代碼實例如下:
@function column-width($index, $widths...){ @return nth($widths, $index); } .col-3 { width: column-width(3, 25%, 50%, 75%, 100%); }
rest參數(shù)的形式是參數(shù)名稱后面跟三個點。上面代碼中,3會傳遞給$index,后面的剩余參數(shù)會都傳遞給$widths($widths生成一個list列表)。nth()是一個內(nèi)置函數(shù),可以從列表中找到對應(yīng)索引的值(索引是從1開始的,與大多數(shù)編程語言從0開始不同)。上面代碼編譯結(jié)果如下:
.col-3 { width: 75%; }
? 文本超出范圍,顯示省略號
/*文本格式化,超出范圍,顯示省略號*/ @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;
?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/1628.html
摘要:有兩種語法規(guī)則目前新的語法規(guī)則從開始被稱為時髦的它是語法的的拓展級,就是說每一個語法正確的文件也是合法的文件,文件使用作為拓展名。備注注意源文件和目標(biāo)文件之間是冒號,與編譯命令中為空格不同。 Introduction Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則(從 Sass 3開始)被稱為 SCSS( 時髦的css(Sassy CSS)),它是css3語法的的拓展級...
摘要:,返回的最大值。非相同的單位,報錯編譯為,返回一個隨機(jī)數(shù)。函數(shù)函數(shù)稱為三元條件函數(shù),主要因為他和中的三元判斷非常的相似。顏色函數(shù)暫時還沒用到過。函數(shù),根據(jù)三個值創(chuàng)建一個顏色將一個顏色根據(jù)透明度轉(zhuǎn)換成顏色。 前戲:前幾篇文章其實都是些基礎(chǔ)必備的,什么變量、繼承、占位符、混合宏...這回來高級點的,玩玩Sass 自帶的一些函數(shù)...有字符串函數(shù)(String Functions)、數(shù)字函數(shù)...
摘要:候補,分別代表兩種寬度之間和僅在一種寬度下的情形。這里是一個很重要的變化,大家可以注意到,這里的變成了,這也是主要的改進(jìn)之一,這個基礎(chǔ)構(gòu)建的變化意味著整個框架在很大程度上都會建立在的基礎(chǔ)上滾蛋吧。 本文所引用的版本為Bootstrap 4 Beta版,閱讀者請先下載好相關(guān)源文件。 時光荏苒,若后續(xù)版本代碼發(fā)生變化,將看心情進(jìn)行更新補充。如果你覺得本文不錯,歡迎評論支持,如需轉(zhuǎn)載請標(biāo)明...
摘要:即元素脫離文檔流的布局,在頁面的任意位置顯示絕對定位脫離文檔流的布局,遺留下來的空間由后面的元素填充。相對定位不脫離文檔流的布局,只改變自身的位置,在文檔流原先的位置遺留空白區(qū)域。 1、描述 CSS 指層疊樣式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets),是由buby語言編寫的一款css預(yù)處理...
閱讀 825·2023-04-26 00:13
閱讀 2795·2021-11-23 10:08
閱讀 2432·2021-09-01 10:41
閱讀 2112·2021-08-27 16:25
閱讀 4177·2021-07-30 15:14
閱讀 2359·2019-08-30 15:54
閱讀 857·2019-08-29 16:22
閱讀 2736·2019-08-26 12:13