Less

less

介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

less 编写的代码需要先编译浏览器才能识别。

lesscss.cn中文网

less.bootcss.com中文网

使用less

浏览器环境

1
2
3
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 编译less文件 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

less.js下载

Node.js环境

  1. 安装less 工具： npm install -g less
  2. 编译：lessc styles.less styles.css

win10系统可能会出现错误

错误

  1. 打开 powerShell 用管理员身份运行
  2. 输入命令： set-ExecutionPolicy RemoteSigned
  3. 输入A
  4. 重新输入编译命令即可

webpack环境

在webpack4中使用 less和 less-loader。详情请参考webpack 开发环境配置。

语法

less文件后缀为.less

注释

1
2
3
4
/*
    多行注释
*/ 
// 单选注释

@import

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

1
2
@import "library"; // library.less
@import "typo.css";

变量

使用 @ 声明变量。

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 声明变量
@bg:green;
//使用运算符加法运算
@bg2:@bg + #f34242;
@fz: 36px;
h2{
    background: @bg2;
    color: #fff;
    font-size: @fz;
}
h3{
    font-size: @fz - 10;
}

混入（Mixins）

混入（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

  1. 样式在混入时圆括号（）是可选的。
  2. 定义待混入样式时后面加上圆括号，在编译时将不再输出该样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 待混入样式
.bg-red{
    background: red;
}
// 加上圆括号（）,在编译输入时将不再输出该样式
.bg-yellow(){
    background: yellow;
    box-shadow: 0 0 18px blue;
}

.box1{
    width: 100px;
    height: 100px;
    // 混入
    .bg-red();
}
.box2{
    width: 200px;
    height: 200px;
    // 混入时也可以不加圆括号
    .bg-yellow;
}

编译后输入样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bg-red {
    background: red;
}
  
/* .bg-yellow 样式未输出 */

.box1 {
    width: 100px;
    height: 100px;
    background: red;
}
.box2 {
    width: 200px;
    height: 200px;
    background: yellow;
    box-shadow: 0 0 18px blue;
}

带参数的混入

1
2
3
4
5
6
7
8
9
10
11
12
// 定义带参数的待混入数据
.box-font(@size,@color){
   font-size: @size; 
   color: @color;
}

.box1{
    width: 100px;
    height: 100px;
    // 使用带参数的混入
    .box-font(20px,gold);
}

映射（Maps）

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//声明规则集
#colors() {
    info: blue;
    success: green;
    warn:yellow;
    danger:red
  }
  
.colors{
    li:nth-child(1){
        //使用规则集中成员
        color: #colors[info];
    }
    li:nth-child(2){
        color: #colors[success];
    }
 }

编译后输入样式：

1
2
3
4
5
6
.colors li:nth-child(1) {
  color: blue;
}
.colors li:nth-child(2) {
  color: green;
}

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

  1. 嵌套规则就是在样式中包含另一样式,less在编译时会自动分析其父子关系。
  2. & 表示当前选择器的父级。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.colors{
    list-style: none;
    li{
        border: 1px solid gold;
        // & 表示当前选择器的父级
        &:hover{
            background: gray;
            color: #fff;
        }
    }
    .red{
        background: red;
    }
}

编译后输入样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.colors {
  list-style: none;
}
.colors li {
  border: 1px solid gold;
}
.colors li:hover {
  background: gray;
  color: #fff;
}
.colors .red {
  background: red;
}

& 产生重复的类名

1
2
3
4
5
6
7
8
.box{
    &-num1{
        color: red;
    }
    &-num2{
        color: yellow;
    }
}

编译后输入样式：

1
2
3
4
5
6
7
.box-num1 {
  color: red;
}
.box-num2 {
  color: yellow;
}

关系选择器

1
2
3
4
5
article {
    ~ article { border-top: 1px dashed #ccc }
    > section { background: #eee }
    nav + & { margin-top: 0 }
}

编译后输入样式：

1
2
3
4
5
6
7
8
9
10
article ~ article {
  border-top: 1px dashed #ccc;
}
article > section {
  background: #eee;
}
nav + article {
  margin-top: 0;
}