如何使用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中高亮显示