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 文件的另一個變量:
Welcome to Yiibai Yiibai
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.
接下來,創建文件 style.less。
style.less
.myclass{
@col: #ca428b;
@color: "col";
background-color: @@color;
}
你可以編譯 style.less 使用下面的命令來生成 style.css 文件:
lessc style.less style.css
接着執行上面的命令,它會自動創建 style.css文件,下面的代碼:
style.css
myclass {
background-color: #ca428b;
}
輸出
讓我們來執行以下步驟,看看上面的代碼工作:
保存上述的HTML代碼到 less_variables_names.html 文件。
在瀏覽器中打開該HTML文件,得到如下輸出顯示。