less是一門css預處理語言,增加了變數,mixin,函式等特性。
一、變數:
顧名思義,「less」英文含義為「減少的」,在我的理解看來就是讓css也可以擁有某些js的特點,譬如如果要給幾個div新增顏色background-color:#4d926f;如果用css來寫就要給每個div分別加這個顏色,如果以後再想換顏色又要改這些樣式,而在less中只需要定義乙個變數即可完成,也方便以後的修改。
示例:styles.less中
@width:600px;
@color:#4d926f;
@height:200px;
.header
相當於.header
二、混合:
混合可以將乙個定義好的class1引入另乙個class2中,從而使class2獲得class1的全部樣式。
有三種引入方法:
1.直接引入某個類的所有屬性。
還是以剛才的例子,比如我需要在header上面新增乙個邊框,我只需定義乙個.box,然後直接引入到.header中即可。
@width:600px;
@color:#4d926f;
@height:200px;
.box
.header
2.引用帶引數的無預設值的類屬性。.box2(@border_width)
.header3.引用帶引數帶預設值的類屬性。
使用時可以不進行傳參,若傳參可以覆蓋預設值。
.box2(@border_width:8px)
.header
三、巢狀:
我們可以在乙個選擇器中巢狀另乙個選擇器來實現繼承。這樣可以使層級關係更清楚,更方便使用。
.header}
相當於
.header h1
四、函式和運算:
用變數進行加減乘除,這裡需要注意的一點是加減時「+」「-」要與前後空出乙個空格,不然會報錯,建議大家牽扯到運算時給運算後的結果加上(),方便解析。
.content
以上就是less最基本的用法啦,以後還會更新的~歡迎前端同學來交流 less(二) less的變數和注釋
上篇中,我們簡單了解了less的使用環境和怎麼使用less 下面我們了解一下less 的變數和注釋 less 的注釋 這是第一種注釋 這是第二種注釋 上面的第一種注釋麻煩一點,但是當我們的less檔案編譯成css檔案後,css檔案中注釋依然存在 相反的第二種注釋簡單一點,但是編譯成css 檔案後,c...
快速入門less
less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件。less 可以執行在 node 或瀏覽器端。作用 將less型別的檔案轉換為css型別的檔案。常見的less編譯工具有 winless ss koala 使用 來申明...
greater 和less 的使用
greater和less是標頭檔案中定義的兩個結構。下面看它們 的定義,greater和less都過載了操作符 cpp view plain copy template struct greater emplate ty struct greater public binary function t...