Less入门 & Webstorm实时编译

前端
css, less

Less只要半小时就入门了，顺便介绍下怎样用Webstorm实时编译和调试。

基本语法

  • 创建一个最简单的工程，基本结构如下：
1
2
3
4
|- css			// 编译生成css的文件夹
|- src			// 源码
	|- style	// less文件夹
|- index.html	// 首页
  • 变量

变量主要用于声明一个可复用的样式，供多次调用，可将全局常用变量声明在一个文件中，例如创建文件/src/style/variables.less，用于保存全局变量；/src/style/main.less，用于编写样式。这里需要说明，分号（;）在less中非常重要，尽量不要省略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
## variables.less
@color_default: #ffffff;    // 用@声明变量，末尾需要加分号;

## main.less
@import "./variables.less";		// 引入全局变量

.btn-default {
  background-color: @color_default;  // 引用变量，声明样式
}

.nav {
  @nav_height: 55px;		// 声明局部变量，作用域为所在的大括号内
  height: @nav_height;
  li {
    line-height: @nav_height;
  }
}
  • 混合（mixin）

混合可以声明一组固定的样式，被其他元素所引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 普通 */
.panel {
  border: solid 1px #999999;
  background-color: #ffffff;
  font-size: 12px;
}

.btn {
  .panel;	// 加分号
}

/* 带参数，类似带参函数，常用于部分样式不确定 */
.border(@border_width) {
  border: solid black @border_width;
}

.panel {
  .border(5px);
}

/* 带默认值的参数 */
.border(@border_width:10px) {
  border: solid black @border_width;
}

.panel {
  .border();	// 参数为空则取默认值
}
  • 匹配模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 三角向上
.triangle(top,@width:5px,@color:red) {
  width: 0;
  height: 0;
  overflow: hidden;
  
  nprder-style: solid dashed dashed dashed;		// 匹配旧版IE，如果只写solid，会导致背景为黑色
  border-width: @width;
  border-color: @color transparent transparent transparent;
}

// 三角向下
.triangle(bottom,@width:5px,@color:red) {
  width: 0;
  height: 0;
  overflow: hidden;
  
  nprder-style: dashed dashed solid dashed;
  border-width: @width;
  border-color: transparent transparent transparent;
}

.triangle-down {
  .triangle(bottom);	// 向下的三角
}

/* 以上代码可将共有的部分提取出来，利用通配符@_匹配，类似函数的重载 */
.triangle(top,@width:5px,@color:red) {
  nprder-style: solid dashed dashed dashed;
  border-width: @width;
  border-color: @color transparent transparent transparent;
}

.triangle(bottom,@width:5px,@color:red) {
  nprder-style: dashed dashed solid dashed;
  border-color: transparent transparent transparent;
}

// 表示不管第一个参数传入什么值，都需要带上这组样式
.triangle(@_,@width:5px,@color:red) {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: @width;
}

.triangle-down {
  .triangle(bottom);
}
  • 运算
1
2
3
4
5
6
7
@height: 100px;
@color: #aaaaaa;

.panel {
  width: (@height + 20 - 5) * 6 / 3;
  color: @color - 10;	// 颜色运算使用较少
}
  • 嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 潜逃中常用&代替上级选择器 */
ul {
  
  // 等同 ul li
  li {
    
    // 等同 ul li a
    a {
      
      // 等同 ul li a .icon，不是 a.icon
      .icon {
      }
      
      // &代替的是上级选择器，即a，等同 ul li a.active
      &.active {
      }
      
      // 等同 ul li a:hover
      &:hover {
      }
    }
  }
}
  • @arguments
1
2
3
4
5
6
7
8
/* 代替全部参数 */
.border(@w:5px, @c:black, solid) {
  border: @arguments;	// 代入所有的参数
}

.btn {
  .border();
}
  • 注释
1
2
3
/* 这类注释会被原样编译到css中 */

// 这类注释不会被编译到css中

Webstorm实时编译

  • Webstorm可以将less实时编译为css，并且发布到浏览器，此功能还需要用到Chrome和npm（安装NodeJS）；
  • Chrome安装JetBrains IDE Support扩展；
  • npm安装less编译器
1
$ sudo npm install -g less		// 全局安装，如果未翻墙，改为执行 sudo cnpm install -g less
  • Webstorm打开Preference > Build,Execution,Deployment > Debugger > Live Edit，勾选Update中的Auto in (ms)，后面填写更新频率，比如200。
  • 选择Preference > Tools > File Watchers，在右侧点+，选择Less，修改Output paths to refresh为项目的css文件夹的相对路径：../../css/$FileNameWithoutExtension$.css，此处需注意Program应当指向之前安装的less编译器，比如/usr/local/bin/lessc，如果为空，说明less编译器未安装成功，需要重新安装后再试。
  • 右键点击需要调试的页面，选择Debug “页面.html”，注意不能选Run …
  • Chrome会自动加载此页面，顶部如果出现”JetBrains IDE Support正在调试此浏览器”的字样，则说明配置成功。注意：这个提示不可关闭，关闭则失效
  • 编辑less文件，可以将修改后的样式在Chrome中实时显示出来
  • 这个功能还可以用于实时编译Babel、Sass、SCSS、CoffeeScript等。
分享到