代碼組織
代碼按一下順序組織：
- @import
- 變數宣告
- 樣式宣告
1 @import "mixins/size.less"; 2 @default-text-color: #333; 3 .page { 4 width: 960px; 5 margin: 0 auto; 6 }
@import 陳述句
@import 陳述句參考的文需要寫在一對引號內，.less 后綴不得省略，引號使用 ' 和 " 均可，但在同一專案內需統一，
/* Not recommended */ @import "mixins/size"; @import 'mixins/grid.less'; /* Recommended */ @import "mixins/size.less"; @import "mixins/grid.less";
混入（Mixin）
-
在定義
mixin時，如果mixin名稱不是一個需要使用的 className，必須加上括號，否則即使不被呼叫也會輸出到 CSS 中， - 如果混入的是本身不輸出內容的 mixin，需要在 mixin 后添加括號（即使不傳引數），以區分這是否是一個 className，
1 /* Not recommended */ 2 .big-text { 3 font-size: 2em; 4 } 5 h3 { 6 .big-text; 7 .clearfix; 8 } 9 /* Recommended */ 10 .big-text() { 11 font-size: 2em; 12 } 13 h3 { 14 .big-text(); /* 1 */ 15 .clearfix(); /* 2 */ 16 }
避免嵌套層級過多
- 將嵌套深度限制在2級，對于超過3級的嵌套，給予重新評估，這可以避免出現過于詳實的CSS選擇器，
- 避免大量的嵌套規則，當可讀性受到影響時，將之打斷，推薦避免出現多于20行的嵌套規則出現，
字串插值
變數可以用類似ruby和php的方式嵌入到字串中，像@{name}這樣的結構:
1 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
路是自己走出來的，而不是選出來的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544631.html
標籤：Html/Css