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映射JavaScript代碼配合值,並使用預先定義的函數在樣式表處理HTML元素方面。它提供了多種函數來操作的顏色,如round函數,floor函數,ceil函數,百分比等函數
示例
下面的例子演示了使用在Less文件的函數:
Example using Functions
LESS enables customizable, manageable and reusable style sheet for web site.
接下來,創建一個文件 style.less.
style.less
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
你可以編譯 style.less 文件使用以下命令來生成 style.css 文件:
lessc style.less style.css
接着執行上面的命令,它會自動創建 style.css 文件,下面的代碼:
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
輸出
讓我們來執行以下步驟,看看上面的代碼工作:
保存上面的html代碼到 functions.html 文件。
在瀏覽器中打開該HTML文件,得到如下輸出顯示。