大家一起學習less 1 混合

2021-09-06 06:04:14 字數 2242 閱讀 2807

我們先看以下一段例子：

// less


.rounded-corners (@radius: 5px) 


#header 


#footer 


/* 生成的 css */


#header 


#footer
最上方，其實相當於定義了乙個名為「.rounded-corners 」的函式，它有乙個引數叫@radius，預設值為5px。然後對於接著下來的樣式規則，它先判定其是否符合css語法不，符合直接輸出跳過，不符合就當成函式。

有了變數與函式，css就可以實現更大規模的重用了！

有些情況下，我們想根據傳入的引數來改變混合的預設呈現，比如下面這個例子：

.mixin (@s, @color) 


.class
如果想讓.mixin根據不同的@switch值而表現各異，如下這般設定：

.mixin (dark, @color) 


.mixin (light, @color) 


.mixin (@_, @color)
現在，如果執行:

@switch: light;


.class
就會得到下列css:

.class
如上，.mixin就會得到傳入顏色的淺色。如果@switch設為dark，就會得到深色。

具體實現如下：

只有被匹配的混合才會被使用。變數可以匹配任意的傳入值，而變數以外的固定值就僅僅匹配與其相等的傳入值。

我們也可以匹配多個引數：

.mixin (@a) 


.mixin (@a, @b)
當我們想根據表示式進行匹配，而非根據值和引數匹配時，導引就顯得非常有用。如果你對函式式程式設計非常熟悉，那麼你很可能已經使用過導引。

為了盡可能地保留css的可宣告性，less通過導引混合而非if/else語句來實現條件判斷，因為前者已在@media query特性中被定義。

以此例做為開始：

.mixin (@a) when (lightness(@a) >= 50%) 


.mixin (@a) when (lightness(@a) < 50%) 


.mixin (@a)
when關鍵字用以定義乙個導引序列(此例只有乙個導引)。接下來我們執行下列**：

.class1 


.class2
就會得到：

.class1 


.class2
導引中可用的全部比較運算有： > >= = =< 

.truth (@a) when (@a) 


.truth (@a) when (@a = true)
除去關鍵字true以外的值都被視示布林假：

.class
導引序列使用逗號『,』—分割，當且僅當所有條件都符合時，才會被視為匹配成功。

.mixin (@a) when (@a > 10), (@a < -10)
導引可以無引數，也可以對引數進行比較運算：

@media: mobile;


.mixin (@a) when (@media = mobile) 


.mixin (@a) when (@media = desktop) 


.max (@a, @b) when (@a > @b) 


.max (@a, @b) when (@a < @b)
最後，如果想基於值的型別進行匹配，我們就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) 


.mixin (@a, @b: black) when (iscolor(@b))
下面就是常見的檢測函式：

如果你想判斷乙個值是純數字，還是某個單位量，可以使用下列函式：

最後再補充一點，在導引序列中可以使用and關鍵字實現與條件：

.mixin (@a) when (isnumber(@a)) and (@a > 0)
使用not關鍵字實現或條件

.mixin (@b) when not (@b > 0)

大家一起學習less 6 一些有用的混合函式

預設是淺色。gradient color f5f5f5,start eee,stop fff 使用示例 wh wh 最後生成 wh預設是深色，並且後兩個引數要求是0 256的數值 bw gradient color f5f5f5,start 0,stop 255 使用示例 wh.bordered t...

大家一起學習less 3 命名空間

這其實是 巢狀規則 的公升級版。我們先看官網例子吧 less 這裡是命名空間的定義,裡面包含乙個button方法 bundle 這裡是具體呼叫，通過 yyy方式進行呼叫，本人覺得用 更可靠，起碼長得不像親子選擇器 header a 生成的 css header a header a hover上面的...

大家一起學Golang 檔案操作

對檔案操作幾乎每個程式語言都有，go後端開發中對日誌操作較多。建立 開啟檔案 建立兩種方式 func create name string file file,err error 返回檔案物件，預設許可權0666 func newfile fd uintptr,name string filefun...