10分钟学会CSS预处理语言Less

Less 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，将 CSS 赋予了动态语言的特性，如变量、继承、运算、函数等。

Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js在服务端运行。

 

所以学习 Less 是一件轻而易举的事情，下面我们就来看看具体语法。

Less 语法

1、变量

很容易理解:

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

1. //设置变量
2. @niceBlue: #2182e8;
3. @lightBlue: @niceBlue + #333;
4. @fontSize: 14px;
5.  
6. //使用变量
7. .p1 { font-size: @fontSize; color: @niceBlue; }
8. .p2 { font-size: @fontSize + 4; color: @lightBlue; }

编译后输出:

1. .p1 {
2. font-size: 14px;
3. color: #2182e8;
4. }
5. .p2 {
6. font-size: 18px;
7. color: #54b5ff;
8. }

请注意 Less 中的变量为完全的 ‘常量’ ，所以只能定义一次。

2、混合使用

在 Less 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。 下面有这样一个class:

1. //设置通用的属性集
2. .bordered {
3. margin-bottom: 15px; padding-bottom: 5px; border-bottom: solid 1px #ccc;
4. }

当我们需要在其他class中引入通用的属性集时，我们只需要在任何class中像下面这样调用就可以了：

1. //调用通用属性集
2. .title{
3. font-size: 18px; color: #333; font-weight: bold;
4. .bordered;
5. }
6. .desc{
7. color: #666;
8. .bordered;
9. }

编译后输出，.bordered class里面的属性样式都会在 .title 和 .desc 中体现出来，如下:

1. .title {
2. font-size: 18px;
3. color: #333;
4. font-weight: bold;
5. margin-bottom: 15px;
6. padding-bottom: 5px;
7. border-bottom: solid 1px #ccc;
8. }
9. .desc {
10. color: #666;
11. margin-bottom: 15px;
12. padding-bottom: 5px;
13. border-bottom: solid 1px #ccc;
14. }

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。

3、带参数的混合

在 Less 中，还可以像函数一样定义一个带参数的属性集合:

1. .border-radius (@radius) {
2. border-radius: @radius;
3. -moz-border-radius: @radius;
4. -webkit-border-radius: @radius;
5. }

然后在其他class中像这样调用它:

1. .button {
2. .border-radius(6px);
3. }
4. .con {
5. .border-radius(10px);
6. }

4、嵌套规则

LESS 可以让我们以嵌套的方式编写CSS，我们先看下下面这段 CSS:

1. #header .logo {
2. width: 200px;
3. }
4. #header .nav {
5. background: #f8f8f8;
6. overflow: hidden;
7. }
8. #header .nav li {
9. float: left;
10. padding: 0 20px;
11. line-height: 30px;
12. transition: all 0.5s;
13. }
14. #header .nav li:hover {
15. background: #ccc;
16. }

在 LESS 中, 我们就可以这样写:

1. #header{
2. .logo{ width: 200px; }
3. .nav{
4. background: #f8f8f8; overflow: hidden;
5. li{
6. float: left; padding: 0 20px; line-height: 30px; transition: all .5s;
7. &:hover{
8. background: #ccc;
9. }
10. }
11. }
12. }

这样代码更简洁了，而且感觉跟DOM结构格式有点像。

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了。 这对伪类尤其有用，如 :hover 和 :before等。

5、运算

Less中任何数字、颜色或者变量都可以参与运算（加、减、乘、除），这样就可以实现属性值之间的复杂关系。下面我们来看一组例子:

1. @base: 5;
2. @filler: @base * 2;
3.  
4. .demo4{
5. padding: 5px * @base;
6. width: 100% / 2 + @filler;
7. color: #333 - #111;
8. background-color: #e6ebf9;
9. }

编译后输出:

1. .demo4 {
2. padding: 25px;
3. width: 60%;
4. font-size: 16px;
5. color: #222222;
6. background-color: #e6ebf9;
7. }

括号也同样允许使用：

1. .demo4{
2. border: (@base + 2px)/2 solid #333;
3. }

6、注释

CSS 形式的注释在 LESS 中是依然保留的:

1. /* Hello, I'm a CSS-style comment */
2. .class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

1. // Hi, I'm a silent comment, I won't show up in your CSS
2. .class { color: white }

7、Importing

我们可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

1. @import "lib.less";
2. @import "lib";

如果想导入一个CSS文件，并且不想LESS对它进行处理，只需要使用.css后缀即可:

1. @import "lib.css";

这样LESS就会跳过它不去处理它.

Less编译工具

1、Koala

 

一款可视化的前端预处理器语言图形编译工具，优点是操作比较简便，多语言支持，监听文件实时编译，可以批量操作，Windows、Linux、Mac都能完美运行。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

2、Node.js 环境中使用 Less

 

1、下载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】里输入以下命令

1. d:
2. cd D:\Program Files\nodejs\node_modules\npm
3. //下面命令是安装less，注意一定要有-g，否则还得做些其他工作
4. npm install less -g
5. //下面命令用于安装css压缩插件
6. npm install less-plugin-clean-css

4.2、安装完成后就可以使用lessc的命令了

1. //下面命令编译less文件生成css
2. lessc d:\styles.less d:\styles.css
3. //下面命令启用css压缩插件，生成压缩后的css文件
4. lessc d:\styles.less d:\styles.min.css -clean-css

4.3、IDE工具集成——HBuilder预编译less配置

1. 文件后缀 .less
2. 处罚命令 C:\Users\James\AppData\Roaming\npm\lessc.cmd
3. 命令参数 %FileName% %FileBaseName%.css

4.4、IDE工具集成——PhpStorm配置less自动编译css

windows打开设置 File -> setting（mac找到首选项Preferences）。

打开之后，在左上角搜索框输入：file Watchers（文件监听）–新建Less类型的文件监听。