less的使用 基本語法 編譯

注釋

// 會被刪除

/**/ 不會被刪除

定義變數:@變數名:變數值

使用變數:屬性:@變數名

// 變數

@main-color: #333;
// 用法
body

定義變數:@變數名:變數值

使用變數:@ :屬性值

// 變數

@property: color; //屬性
// 用法
body :#333;
}

// 變數

@myselector: banner; //選擇
// 用法
@

定義變數:@變數名:"變數值"

使用變數:屬性:@@變數名

@var:"hi"; //變數名

@hi:"hello world" //變數
// 用法
body

定義變數:@變數名:"變數值"

使用變數:屬性:@@變數名

// 變數

@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 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....