如何使用Less?

LESS是動態樣式語言，賦予CSS動態語言的特性，如變量、繼承、運算、函數，使得CSS更方便編寫與維護。>>官網

less

@color:#ff0000;
body{color:@color;}

 編譯後

bosy{color:ff0000;}

 

一：命令行用法：

安裝：

npm install -g less

解析styles.less

lessc styles.less

解析styles.less到styles.css

lessc styles.less styles.css

 注意： 若是文件路徑帶有中文會編譯不成功

 

二：瀏覽器端使用：

一、引入rel屬性的值是stylesheet/less的.less樣式表：

<link rel="stylesheet" href="test.less">

 

二、下載less腳本，放在本身項目中：

<script src="js/less.js" type="text/javascript"></script>    

或引用：

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

 

在線LESS編譯器>>

語法：

變量

@color:#ff0000;
body{color:@color;}

輸出：

body{color:#ff0000;}

 

 

混合

.bd{border:1px solid #000;}
.a{.bd}

輸出：

.a{border:1px solid #000;}

 

 

帶參數混合

.box(@height){
height:@height;
line-height:@height;
}
.a{.box(25px);}

輸出：

.a {
height: 25px;
line-height: 25px;
}

 

嵌套：

.box{
    .a{color:blue;}
    .c{&:hover{color:yellow}}
}

輸出：

.box .a{color:blue;}
.box .c:hover{color:yellow;}

 

 

命名空間

.box{
.a{color:red;}
}

body{
.box > .a;
}

輸出：

body {
color: red;
}

 

做用域

@color:red;
body{
@color:#ffff00;
color:@color;
}

輸出：

body {
color: #ffff00;
}

 

在不一樣軟件中的使用：

FIS3中使用less

Webstorm實時編譯LESS

less在sublime中使用

讓Less在Dreamweaver中高亮顯示