10分钟学会CSS预处理语言Less
Less 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，将 CSS 赋予了动态语言的特性，如变量、继承、运算、函数等。
Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js在服务端运行。
所以学习 Less 是一件轻而易举的事情，下面我们就来看看具体语法。
很容易理解:
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
//设置变量
@niceBlue: #2182e8;
@lightBlue: @niceBlue + #333;
@fontSize: 14px;
//使用变量
.p1 { font-size: @fontSize; color: @niceBlue; }
.p2 { font-size: @fontSize + 4; color: @lightBlue; }
编译后输出:
.p1 {
font-size: 14px;
color: #2182e8;
}
.p2 {
font-size: 18px;
color: #54b5ff;
}
请注意 Less 中的变量为完全的 ‘常量’ ，所以只能定义一次。
在 Less 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。 下面有这样一个class:
//设置通用的属性集
.bordered {
margin-bottom: 15px; padding-bottom: 5px; border-bottom: solid 1px #ccc;
}
当我们需要在其他class中引入通用的属性集时，我们只需要在任何class中像下面这样调用就可以了：
//调用通用属性集
.title{
font-size: 18px; color: #333; font-weight: bold;
.bordered;
}
.desc{
color: #666;
.bordered;
}
编译后输出，.bordered class里面的属性样式都会在 .title 和 .desc 中体现出来，如下:
.title {
font-size: 18px;
color: #333;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: solid 1px #ccc;
}
.desc {
color: #666;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: solid 1px #ccc;
}
任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。
在 Less 中，还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他class中像这样调用它:
.button {
.border-radius(6px);
}
.con {
.border-radius(10px);
}
4、嵌套规则
LESS 可以让我们以嵌套的方式编写CSS，我们先看下下面这段 CSS:
#header .logo {
width: 200px;
}
#header .nav {
background: #f8f8f8;
overflow: hidden;
}
#header .nav li {
float: left;
padding: 0 20px;
line-height: 30px;
transition: all 0.5s;
}
#header .nav li:hover {
background: #ccc;
}
在 LESS 中, 我们就可以这样写:
#header{
.logo{ width: 200px; }
.nav{
background: #f8f8f8; overflow: hidden;
li{
float: left; padding: 0 20px; line-height: 30px; transition: all .5s;
&:hover{
background: #ccc;
}
}
}
}
这样代码更简洁了，而且感觉跟DOM结构格式有点像。
注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了。 这对伪类尤其有用，如 :hover 和 :before等。
Less中任何数字、颜色或者变量都可以参与运算（加、减、乘、除），这样就可以实现属性值之间的复杂关系。下面我们来看一组例子:
@base: 5;
@filler: @base * 2;
.demo4{
padding: 5px * @base;
width: 100% / 2 + @filler;
color: #333 - #111;
background-color: #e6ebf9;
}
编译后输出:
.demo4 {
padding: 25px;
width: 60%;
font-size: 16px;
color: #222222;
background-color: #e6ebf9;
}
括号也同样允许使用：
.demo4{
border: (@base + 2px)/2 solid #333;
}
6、注释
CSS 形式的注释在 LESS 中是依然保留的:
/* Hello, I'm a CSS-style comment */
.class { color: black }
LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
7、Importing
我们可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:
@import "lib.less";
@import "lib";
如果想导入一个CSS文件，并且不想LESS对它进行处理，只需要使用.css后缀即可:
@import "lib.css";
这样LESS就会跳过它不去处理它.
Less编译工具 1、Koala一款可视化的前端预处理器语言图形编译工具，优点是操作比较简便，多语言支持，监听文件实时编译，可以批量操作，Windows、Linux、Mac都能完美运行。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
2、Node.js 环境中使用 Less1、下载Windows 安装包(.msi)，选择安装位置：”D:\Program Files\nodejs”，然后一路”Next “即可。
2、检测PATH环境变量是否配置了Node.js，点击开始 => 运行 => 输入”cmd” => 输入命令”path“。
3、检查Node.js版本
node --version
4、安装Less
4.1、在【Node.js command prompt】里输入以下命令
d:
cd D:\Program Files\nodejs\node_modules\npm
//下面命令是安装less，注意一定要有-g，否则还得做些其他工作
npm install less -g
//下面命令用于安装css压缩插件
npm install less-plugin-clean-css
4.2、安装完成后就可以使用lessc的命令了
//下面命令编译less文件生成css
lessc d:\styles.less d:\styles.css
//下面命令启用css压缩插件，生成压缩后的css文件
lessc d:\styles.less d:\styles.min.css -clean-css
4.3、IDE工具集成——HBuilder预编译less配置
文件后缀 .less
处罚命令 C:\Users\James\AppData\Roaming\npm\lessc.cmd
命令参数 %FileName% %FileBaseName%.css
4.4、IDE工具集成——PhpStorm配置less自动编译css
windows打开设置 File -> setting（mac找到首选项Preferences）。
打开之后，在左上角搜索框输入：file Watchers（文件监听）–新建Less类型的文件监听。
作者：前端基础开发
