less與sass迴圈對比

2021-09-18 02:24:33 字數 828 閱讀 2173

直接將之前自己的問題複製過來的,主要是對比less和sass迴圈樣式的用法哪個更好用。

.for(@num) when (@num <20)

.for((@num+1))

}.for(1);

迴圈出來的結果是:

.width-(1*5) 

.width-(2*5)

如何修改.width-((@num) * 5)這部分從而達到下面的效果呢?

.width-5 

.width-10

.width-15

將基於@num計算出來的新值賦給乙個新的變數@name,.width-@name這樣呼叫就可以了。

.for(@num) when (@num <20)

.for((@num+1))

}.for(1);

不得不吐槽下less,單單迴圈這裡真心不如sass好用.

下面放乙個sass的寫法:

@for $i from 1 through 10  

}

就這麼簡單,簡潔易理解,#$i可以直接和5進行計算,而不需要再加括號,而less中無論你採用下面哪種都不行

.width(@)

.width(@*5)

.width(@num*5)

.width((@num)*5)

.width(@*5)

sass與less對比學習

sass基於ruby語言開發,因此在開發之前必須安裝ruby less只需引入 less 檔案即可開發 sass以 定義變數 less是以 定義變數 sass color fff p less color fff p sass 定義 mixin border bg color bg color 呼叫...

less與sass的區別點

less與sass 相同點 1,兩者都作為css擴充套件技術,也都,基於css的高階預處理語言之上。2,都有的優點 簡化 降低維護成本。3,都必須要避免中文環境,所涉及到的所有目錄,標題以及內容,不能有中文。區別點 1,變數符號不同 less是 sass是 2,編譯條件不一樣 less是需要解析器,...

Less和Sass相同與不同

一 less與sass分別是什麼 1 less less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件,它可以執行在 node 或瀏覽器端。2 sass sass 是一款強化 css 的輔助工具,它在 css 語法的基礎上...