LESS学习笔记

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

编译工具

  • Koala
  • node.js
  • 浏览器端编译

LESS语法

申明编码格式

头部仍然不能忘记申明编码格式
1
@charset "utf-8";

注释

1
2
/*这种形式会被编译保留*/
//这种形式不会被编译保留

变量

变量以@[变量名]:[value]的形式申明
1
2
3
4
5
6
7
// 申明变量
@fontColor: red;

// 使用变量
.word {
color: @fontColor;
}

变量也有作用域,局部变量可写在混合模式的 { } 中间

混合Mixin

不带参数的混合:和普通class写法类似

不带参数的混合变量也可以加括号,此时编译的时候不会生成该class的样式

1
2
3
4
5
6
7
8
9
.border {
border: 5px solid green;
}
.box {
width: 100px;
height: 100px;

.border;//不需要加括号
}

带参数的混合

1
2
3
4
5
6
7
8
9
.border(@border_width) {
border: @border_width solid green;
}
.box {
width: 100px;
height: 100px;

.border(30px);
}

带参数的混合还可设定默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.border(@border_width:10px) {
border: @border_width solid yellow;
}
.box {
width: 100px;
height: 100px;

.border(30px);
}
.box2 {
width: 200px;
height: 200px;

.border();//默认用10px
}

匹配模式

相当于JS中的 if,满足条件后才能匹配,例如下面代码:

用LESS画一个三角形
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
.triangle(top, @width: 5px, @color: red ) {
// 关键词为top时用这个样式(三角朝上)
border-width: @width;
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom, @width: 5px, @color: red ) {
// 关键词为bottom时用这个样式(三角朝下)
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left, @width: 5px, @color: red ) {
// 关键词为left时用这个样式(三角朝左)
border-width: @width;
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right, @width: 5px, @color: red ) {
// 关键词为right时用这个样式(三角朝右)
border-width: @width;
border-color: transparent transparent transparent @color;
border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 5px, @color: red ) {
// 公用样式,参数名为"@_"(固定)
// 且原先的变量"@width" "@color"必须带上
width: 0;
height: 0;
overflow: hidden;
}

.down-icon {
.triangle(bottom,10px);
}

运算

任何数字、颜色或者变量都可以参与运算(+ - * /),运算应该被包裹在括号中

1
2
3
4
5
6
@font-big: 20px;

.word {
font-size: @font-big + 2;
//只要一个带单位就行
}

嵌套规则

  • 一般嵌套
  • 两种特殊嵌套
    • &对伪类使用: hover, focus
    • &对链接的使用: 例如 &-item

另外,嵌套最好不要超过三层

1
2
3
4
5
6
7
<ul class="list">
<li><a href="#">条目1</a><span>xxxx-xx-xx<span></li>
<li><a href="#">条目2</a><span>xxxx-xx-xx<span></li>
<li><a href="#">条目3</a><span>xxxx-xx-xx<span></li>
<li><a href="#">条目4</a><span>xxxx-xx-xx<span></li>
<li><a href="#">条目4</a><span>xxxx-xx-xx<span></li>
</ul>
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
.list {
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;

li {
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}

a {
float: left;

// 和sass一样,&代表他的上一层选择器
&:hover {
color:red;
}
}

span {
float: left;
}
}

@arguments变量

@arguments包含了所有传递进来的参数
如果你不想单独处理每一个参数的话就可以像下面这样写:

1
2
3
4
5
6
7
8
9
10
.border_arg(@width: 30px, @color: red, @style: solid) {
border: @arguments;
}

.box {
width: 200px;
height: 100px;

.border_arg(40px);
}

避免编译

有时候我们可能需要

  1. 输出一些不正确的CSS语法
  2. 使用一些LESS不认识的专有语法

我们可以在字符串前加上一个~'[code]',例如:

1
2
3
.box {
width: ~'calc(300px-30px)';
}

!important关键字

  • 会为该混合样式中的所有样式带上!important关键字
  • 一般在调试的时候使用

导入

导入一个LESS文件
1
2
//导入一个reset.less,可以不加扩展名
@import "reset";
导入一个CSS文件
1
2
//导入一个reset.css
@import(less) "reset.css";