Less教學
Less安裝
Less嵌套規則
Less運算符
Less轉義
Less函數
Less命名空間和訪問器
Less作用域
Less註釋
Less導入
Less變量概述
Less選擇器
Less URLs
Less import語句
Less變量插值屬性
Less變量插值
Less變量名
Less變量延遲加載
Less缺省變量
Less變量
Less經典用例
Less合併風格及高級混入
Less擴展附加到選擇器
Less擴展內部規則集
Less擴展嵌套選擇器
Less使用擴展精確匹配
Less nth表達式
Less擴展all
Less選擇器插值擴展
Less作用域及擴展@media
Less重複檢測
Less擴展
Less不輸出混合類型
Less在混合類型的選擇器
Less混合命名空間
Less守護命名空間
Less !important關鍵字
Less混合類型
Less Mixins使用多參數
Less命名參數
Less @arguments變量
Less高級參數和@rest變量
Less模式匹配
Less參數化混合
Less混合作用域
Less Mixin和返回值
Less混合在另一個混合中
Less混合作爲參數
Less傳遞規則集到混合
Less導入指令
Less導入選項reference關鍵詞
Less導入選項inline關鍵詞
Less註釋
註釋使得代碼清晰,使用戶能夠方便理解。您可以在代碼中使用這兩種註釋:區塊樣式和內聯註釋,但是當你編譯 Less 代碼,單行註釋將不會出現在CSS文件。
示例
下面的例子演示了Less文件中使用的註釋:
Example using Comments
LESS enables customizable, manageable and reusable style sheet for web site.
It allows reusing CSS code and writing LESS code with same semantics.
接下來,創建文件 style.less。
style.less
/* It displays the
green color! */
.myclass{
color: green;
}
// It displays the blue color
.myclass1{
color: red;
}
你可以編譯 style.less 文件使用以下命令來生成 style.css 文件:
lessc style.less style.css
接着執行上面的命令,它會自動創建 style.css文件,下面的代碼:
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
輸出
讓我們來執行以下步驟,看看上面的代碼工作:
保存上面的 html 代碼在 comments.html 文件。
在瀏覽器中打開該HTML文件,得到如下輸出顯示。