編寫自定義Sass 函式的方法步驟詳解

2021-09-24 10:19:37 字數 2871 閱讀 6973

為什麼80%的碼農都做不了架構師?>>>

如果您構建過不少**,可能已注意到可以在乙個專案中輕易的複製**然後跨專案應用。反覆複製相同的**會浪費時間和增加錯誤出現的可能性。在sass之前的系列中,我曾說mixins是樣式重用和編寫 dryer**的乙個選擇。functions是實現相同功能的另乙個方法。本文就將主要和大家介紹function指令和自定義函式的編寫,希望可以幫助大家更好的學習sass 。

如何建立和使用自定義函式

函式是可返回乙個sass任何資料型別單一值的**塊。建立自定義函式需要兩個sass指令,@function和@return。前者建立函式,後者表明了函式將返回的值。

@function function-name($args) p

重申,這兩個都會呼叫同乙個函式。可以假定該函式將計算px或em值,並返回作為段落的font-size。

正像我所說的,函式可以訪問任何全域性定義的變數。下個示例中我建立了兩個全域性變數,$total和$col。$total表示網格的總列數,$col表示乙個3列寬的網格字段。

$total: 8; $col: 3

@function column-width()

函式完成運算後**被編譯為:

.col-3

這樣編寫的函式用處不大,因為不得不硬編碼總列數和網格欄位的大小作為全域性變數。乙個更有用的方案是將這些變數當成引數傳遞,下面我們重寫這個函式。

@function column-width($col, $total) .col-5

會編譯成:

.col-3 .col-5

關鍵字引數

您可能已經注意到,在前面的例項中,我按照它們在函式中列出的順序傳遞引數。這是必須的,除非您使用關鍵字。

可以使用key:value的格式傳遞鍵/值對。

.col-3

如果包含了鍵名,則不必按它們在函式中列出的順序來排列。

.col-3

儘管函式是以先$col後$total的順序列出,通過使用每個值之前的關鍵字,函式知道哪個對應哪個。

您還可以在建立函式時宣告引數的預設值。這裡我修改了函式,所以總列數的預設值為8。

@function column-width($col, $total:8)

您可通過傳遞帶有或者不帶關鍵字的引數來覆蓋預設值。

.col-3

.col-4

乙個更實際的例子

到目前為止並沒有哪個例子很實用。我寫它們是為了解釋某事物如何運作。下面我們來寫一些更實用的**。

這裡我將全域性變數$total設定為8,然後重寫了前面例子中的函式,使用全域性變數,而不是將總列數作為引數傳遞。

最後我使用了乙個從1執行到$total值的for迴圈。在迴圈裡面,計數器$i成為了類名的一部分,並且類的寬度是通過將$i的值傳遞給函式而生成的。

$total: 8;

@function column-width($col) ;

sass**編譯為:

.col-1 .col-2 .col-3 .col-4 .col-5 .col-6 .col-7 .col-8

如果您決定使用12列或9列或4列而不是8列布局,您只需要更改$total的值。自定義函式和@for迴圈將完成其餘操作。

可變引數

像mixins一樣,函式可以通過在引數名稱後面使用3個點(非省略號)來接收可變引數。該函式將從傳遞給它的變數引數建立乙個列表。

在下面的示例中我建立了乙個函式,它接收乙個名為$index的引數和乙個名為$widths...的變數引數。

@function column-width($index, $widths...)

因為75%是索引為3的值,所以**編譯為:

.col-3

坦白說這不是特別有用的函式,因為如果僅僅是設定寬度,不呼叫函式設定會更容易。雖然可變引數在mixins中有用,可以新增多個盒子陰影,但很難想象它們在函式中有什麼用處。但這仍然是你可以做的事,我認為值得分享。

給您的函式名新增字首

值得一提的是,給您的函式名新增乙個字首不失為乙個好主意,這樣可避免與內建函式或您可能正在使用的庫產生命名衝突。

不難想象其他人建立了乙個與我在示例中使用的函式名稱衝突的column-width函式。將其命名為vanseo-column-width可能更好,因為第三方函式不太可能會使用相同的字首。

function還是mixin

因為 sass functions 和 sass mixins是相似的,您可能納悶應該使用哪個。雖然類似,但它們有乙個重要的區別,這表明了在什麼時候使用哪個是最佳的。

兩者之間的主要區別是,sass**的mixins輸出行將直接編譯為css樣式,而函式則返回乙個可以作為css屬性或可傳遞給另乙個function或mixin的值。

說實話,您可以將每個函式都改寫為混合巨集的形式,反之亦然,但每個都有清晰的用例。

想要直接輸出樣式,使用mixin;想執行返回值的運算,使用function。例如,確定響應容器的百分比寬度公式可能看起來很熟悉

target / context = result

因為這是乙個可能在樣式表中執行多次的運算,適合使用function,您可以傳遞target和context的值從而得到返回的結果。

總結

functions是一種將可重用的**移動到單獨包的方法。它們與mixins相似,兩者的不同點在於輸出。functions返回乙個值而mixins輸出**。如果您知道怎麼使用其中乙個,那麼使用另乙個對您來說也不難。

sass資料型別,運算子和函式系列已經到了尾聲。希望在系列的最後您能理解我為什麼花時間講每種不同的資料型別。除顏色外,其他的資料型別在function和mixins中更有用。

sass控制語句和自定義函式

if 判斷表示式else if 判斷表示式else for迴圈 有兩種表現形式 for var from 開始值 through 結束值 包括結束位置 for var from 開始值 to 結束值 不包括結束值 var 表示變數 count 4 for i from 1 throughn coun...

R語言 編寫自定義函式

r語言實際上是函式的集合,使用者可以使用base,stats等包中的基本函式,也可以編寫自定義函式完成一定的功能 乙個函式的結構大致如下所示 myfunction function arglist 其中,myfunction為函式名稱,arglist為函式中的引數列表,大括號 內的語句為函式體,函式...

編寫自定義特性

自定義特性一般標註在作用的程式元素的上方 編譯器首先組合特性名稱和attribute,然後尋找該組合名,所以特性名為fieldname和fieldnameattribute的兩個特性沒有區別 編譯器將尋找包含有這個名稱的類,它直接或者間接的派生資system.attribute 編寫自定義類的步驟 ...