動態樣式語言 LESS

less作為css語言的擴充套件，賦予了css動態語言的特性，如：變數，繼承，運算，函式等。如果你原本就是程式設計師，你一定會非常喜愛less，它可以幫你節省很多重複工作，可以讓你像編寫一門動態語言一樣地編寫css。

本文總結了less的相關語法和使用方式，可供查閱和入門使用。

less允許使用變數，可以將乙個多次用到的值設為乙個變數。less中沒有型別限制，以符號**@**標識變數，在宣告或使用變數時再變數名前新增符號@即可

@bg-color:
#fff;
@base-font-size:
16px;
//使用
.body

多數情況下，我們是將這個變數當做乙個常量來使用；less中變數也只能被定義一次這一點使之更像常量。

將需要用到多次的全域性css樣式集成為乙個css類，在其他類中可以直接引用這個整合類，這個過程稱為混合。

例項：

.base-border .img-top

.img-bottom

上面的會被解析為

.img-top

.img-bottom

個人認為混合與傳統oo語言的繼承頗為相似，子類繼承父類的特徵的同時，也可以新增自己專有的特徵。

在使用混合時，less允許給父類傳入引數，引數使我們可以更加靈活地運用混合

比如，可以稍微改動上面的.base-border類

.base-border(@radius)
//使用
.img-top
.img-bottom

還可以設定引數的預設值，多個引數用逗號隔開：

.base-border(@color: #0c6dc7,@radius: 6px)
//使用
.img-top
.img-bottom

在乙個帶引數的類中，我們可以通過@arguments來獲取傳進來的所有引數，可以整體作為某個屬性的值。

巢狀規則基於html的文件結構，可以減少我們對一些css選擇器的使用，使**更易懂，更簡潔。

例如，我們需要設定這樣的樣式：

.parent .parent .child .parent

.ancestor

用less可以這樣巢狀，文件結構更加明顯：

.parent
&.ancestor
}

符號&,表示「and」，也可以理解為父級選擇器。

less提供了多個顏色運算的函式，非常方便

函式功能

lighten(@color,10%)

返回乙個比@color亮10%的顏色

darken(@color,10%)

返回乙個比@color暗10%的顏色

saturate(@color,10%)

返回乙個比@color飽和度高10%的顏色

desaturate(@color,10%)

返回乙個比@color飽和度低10%的顏色

fadein(@color,10%)

返回乙個比@color透明度低10%的顏色，透明度低，顏色更深

fadeout(@color,10%)

返回乙個比@color透明度高10%的顏色，透明度高，顏色更淺

fade(@color,90%)

返回乙個透明度為0.9的顏色，等於fadeout(@color,10%)

spin(@color,10)

返回顏色的hue值比@color大10度

spin(@color,-10)

返回顏色的hue值比@color小10度

mix(@color-1,@color-2)

返回@color-1和@color-2混合後的顏色

這些顏色運算函式會先將顏色轉化為hsl色彩空間，然後在通道級別運算

less還提供了幾個math函式，用來處理數字

函式功能

ceil(@number)

向上取整

floor(@number)

向下取整

round(@number)

四捨五入

less匹配即判斷是否滿足條件，相當於switch或if-else if的用法，彌補了less不支援switchh和if的缺憾。

例項用法：

.special-border(top,@color)
.special-border(bottom,@color)
.special-border(@_,@color)
.content

上述**中.content類匹配了2和3

導引是對引數是否滿足一定條件的匹配，不是對引數值得匹配。搭配when語句使用。

.class(@a) when(@a > 10)
.class(@a) when(iscolor(@a))
.class(@this-media) when(@this-media = mobile)
.class(@a) when(@a) //僅當@a = true 時才可匹配

注意，在導引後的when語句中，若是只有單獨的值，則除布林值true以外的任何值都被視作假

在檔案開頭通過關鍵字@import匯入其他樣式檔案

@import "style.less"
@import "style"
@import "style.css"

以.less為字尾的檔案的字尾名帶不帶均可

另： less不會處理.css的檔案

less中的變數作用域和其他語言類似，首先會從本地查詢變數或者混合模組，如果沒找到的話會去父級作用域中查詢，直到找到為止.

兩種注釋方法，應注意其區別：

/*這是注釋，編譯為css後不會被濾掉*/

//這也是注釋，編譯為css後會被濾掉

less可以在客戶端使用，也可以在服務端使用

在html頭部引入你的.less樣式檔案

在html頭部引入less.js檔案

上述引入檔案的順序不可顛倒

先安裝，最簡便的方法是通過npm包管理器安裝

$ npm install less // 或安裝最新穩定版本的 less $ npm install

less@latest

在檔案頭部通過require引入less即可使用

$ lessc styles.less > styles.css

less並未減弱css的任何強大之處，在任何時候都可以回退至原始css，同時讓習慣動態語言的程式設計師可以更方便地編寫less。與其功能類似的有sass，兩者各有優點，都值得一學。

動態樣式語言 LESS基礎知識

css是一門非程式式語言，缺少邏輯性，不便於維護 less在css現有語法的基礎上，為css加入程式式語言的特性引入了變數混入運算函式等功能，大大簡化css的編寫，降低了css的維護成本 less包含一套語法和乙個解析器，使用者用它的語法生成樣式規則，這些規則通過解析器後生成css檔案 1....

LESS 一種流行的新式的動態樣式語言

簡介 less 是動態的樣式表語言，通過簡潔明瞭的語法定義，使編寫 css 的工作變得非常簡單。本質上，less 包含一套自定義的語法及乙個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 css 檔案。less 並沒有裁剪 css 原有的特性，更不是用來取代 ...

less樣式中加入變數

有時候我們為了方便統一修改樣式，或是為了精簡就可以在樣式中採用變數的方式。1.定義顏色如果頁面的背景顏色文字顏色等是同一種，我們可以定義乙個顏色變數，這樣後期如果修改整體色調就會很方便。back color fff background back color color back color ...

動態樣式語言 LESS

動態樣式語言 LESS基礎知識

LESS 一種流行的新式的動態樣式語言

less樣式中加入變數

相關推薦