如何使用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

注意：如果文件路径带有中文会编译不成功

二：浏览器端使用：

1、引入rel属性的值是stylesheet/less的.less样式表：

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

2、下载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>

语法：

变量

@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;
}

在不同软件中的使用：