使用less函式實現不同背景的CSS樣式

今天在公司遇到乙個比較特殊的需求，需要完成這樣的布局，如下圖：

每乙個塊的背景需要不同，而其他都是相同的，這時候就應該把背景提出來單獨寫成乙個css樣式類。

那麼問題來了，有四個不同的背景需要寫4個基本重複的css樣式類，要是有更多的背景呢？如何避免這種重複的操作？

幸運的是，公司的底座使用less來編輯css樣式的，於是今天用了乙個小時的時間來研究如何使用less來簡化上面這種重複的操作。

具體**如下：

//less中的背景迴圈

.bgimgwhile(@counter) when (@counter < 5 ) -3x.png") no-repeat 0 0;
background-size: cover;
}.bgimgwhile(( @counter + 1 ));// 遞迴呼叫自身
}.bgimgwhile(1);

整個方法的原型為：

.funname(@counter) when (@counter < max ) 

.funname(( @counter + 1 ));// 遞迴呼叫自身
}.funname(1);

less 函式 less的解讀

看似很簡單，但是有幾個需要注意的點 less檔案和js檔案順序固定，less上 js下，rel stylesheet less 是less 不建議使用此方法，消耗效能 在 node.js 環境中使用 less npm install g less 安裝lesslessc version 檢視版本le...

less的基本使用

3 node編譯 1 變數的定義 變數名 值2 變數的使用 作為屬性值使用 變數名 作為選擇器或者屬性名使用 先從本作用域找，沒有再去上層作用域找，在同一作用域下，變數定義兩次，後面的會覆蓋前面的 1 css注釋，編譯成css後依然存在 2 less注釋，編譯成css後不顯示 1 普通混合 會在cs...

Less的簡單使用

1.定義變數 color dc3545 2.樣式復用 1 無引數 box layout 2 帶引數 box r 10px layout 3.樣式巢狀 layout div a slider 4.less轉css 配置nodejs環境，安裝npm，通過npm安裝lessc，lessc可將less檔案轉...