注釋
// 會被刪除1. 變數為屬性值/**/ 不會被刪除
定義變數:@變數名:變數值
使用變數:
屬性:@變數名
2. 變數為屬性或者為選擇器// 變數
@main-color: #333;
// 用法
body
定義變數:@變數名:變數值
使用變數:
@ :屬性值
// 變數
@property: color; //屬性
// 用法
body :#333;
}
3. 變數為變數名// 變數
@myselector: banner; //選擇
// 用法
@
定義變數:@變數名:"變數值"
使用變數:
屬性:@@變數名
4. 變數為位址@var:"hi"; //變數名
@hi:"hello world" //變數
// 用法
body
定義變數:@變數名:"變數值"
使用變數:
屬性:@@變數名
5. 匯入語句// 變數
@images: "../img";
// 用法
body /white-sand.png");
}
可以匯入其他的less檔案
// 變數
@themes: "檔案路徑";
// 用法
@import "@";
定義函式:.函式名{}
或.函式名(@引數名:預設值){}
後面這種形式只建立不會輸出,引數可以是多個呼叫函式:
函式名
或函式名(引數值)
呼叫mixin時,括號是可選的
.my-mixin
.my-other-mixin(@color:white)
.border-radius(@radius)
.class
/* css寫法 */
.container .row div
/* less寫法 */
.container
}}
&
運算子表示巢狀規則的父選擇器,在修改類或偽類時常用;
交集選擇器
/*css語法*/
li.active
偽類/* less語法 */
li}
/* css語法 */
a:hover
偽元素/* less語法 */
a}
/* css語法 */
div::before
兄弟選擇器/* less語法 */
div}
div
&~div
}
使用命令行將使用.less
檔案編譯成.css
檔案
npm
安裝lessc
npm install less -g
使用命令列
在less所在目錄開啟cmd執行命令lessc less檔名.less css檔名.css
lessc index.less index.css
lessc index.less ../css/index.css
less的基本語法以及使用
最近在專案的開發過程中,發現自己的css的 的層級解構不明確,而且很多的地方寫的比較凌亂。在後期新增功能的過程中,往往都是在上面加一段css,有時候比較懶,就會直接綴在css 的最後。這往往導致在後期修改css 的時候,很不容易找到自己的 less的出現很大程度上的幫我們解決了這個問題。less是c...
less基本語法
less的注釋有兩種方式,一種為css用的 這種注釋的方法會被less所編譯成css。另一種為 這種不會被less所編譯 less 會被編譯 不會被編譯css輸出 會被編譯 less中用 變數名 值的方法來生命變數 less test width 100px test color red box c...
Less的常用編譯語法
開發環境 在生產環境下編譯 產品還沒開發完,正在開發中,這個是開發環境 在開發環境下編譯只需要匯入less.js即可 引用less步驟 lang ch charset utf 8 demotitle rel stylesheet less href 引入寫的less檔案 src js.less 2....