Less语言的语法规则及使用

Less 语言的语法规则及使用

一. Less 介绍

Less（Leaner Style Sheets） 是一种向后兼容的 CSS 扩展语言，属于 CSS 预处理器的范畴，它扩展了 CSS 语言，增加了变量、混入、函数等特性，使 CSS 更易维护和扩展。

Less 官网：lesscss

Less 中文官网：lesscss.cn

Less 既可以在客户端上运行 ，也可以借助 Node.js 在服务端运行。

直接在浏览器端使用：

1. 引入.less文件，（注意 rel 属性设置为"stylesheet/less"）

<link rel="stylesheet/less" type="text/css" href="styles.less" />

2. 引入less.js文件

<script src="https://cdn.jsdelivr.net/npm/less"></script>

在服务器端 Node.js 中使用:

1. 安装 Less 编译器

npm install less -g
npm install less@1.6.2 -g   #安装1.6.2版本
npm install less@latest -g  #安装最新版本

2. 编译less文件并输出标准格式的css文件

lessc styles.less styles.css

在 VScode 中的使用：

1. 安装插件：Easy LESS
2. 创建styles.less并按照 less 的语法规则编写 less 代码
3. 保存后自动生成styles.css文件
4. 在 html 页面中引入编译好的styles.css文件

二. Less 的语法规则

1. 变量（Variables）

1.1 变量的定义与使用

在 Less 语言中可以定义变量，用@符来修饰，格式：@name：value

• 对于比较常用的属性值，可以先使用变量进行定义，之后进行多次调用。

• 这里的变量既可以定义属性值，也可以定义选择器和属性名，作为属性值调用时使用@name，作为选择器和属性名调用时使用@{name}。

• 变量还可以定义 url 地址，调用时使用@{name}

作为属性值调用：

@width：100px； //作为属性值使用
@height:@width + 100px;
.class{
   
  width: @width;
  height: @height;
}

//编译结果：
.class{
   
  width: 100px;
  height: 200px;
}

作为选择器和属性名调用：

@selector: #id;    //作为选择器使用
@m: margin;    //作为属性名使用
@{
   selector} {
   
  @{
   m}：10px;
}

//编译结果
#id {
   
  margin: 10px;
}

作为 url 地址调用:

@url: './img'; //作为url使用
.class {
   
  background-color: url('@{url}/image.png') //特别注意这边是字符串
;
}

//编译结果：
.class {
   
  background-color: url('./img/image.png');
}

1.2 变量的作用域

Less 中变量的作用域规则与 CSS 中相同，都是从本规则集的变量和混入中进行查找，若没有，则从父集作用域继承。

@color: red;
#page {
   
  @color: white;
  #header {
   
    color: @color; // white
  }
}

1.3 变量的延迟加载(Lazy evaluation)

Lazy evaluation：延迟计算，惰性计算，指的是仅仅在真正需要执行的时候才计算表达式。

• 在 Less 中支持变量的延迟加载，即变量的声明可以位于调用之后；

• 在同一个作用域中，若一个变量被声明了多次，则最后一次声明有效；在不同的作用域中声明同一个变量，则根据作用域的查找规则进行赋值。

.lazy-eval {
   
  width: @var; //width: 9%
  @a: 9%;
}
@var: @a;
@a: 100%;

2. 混入（Mixins）

混入是将一组属性从一个规则集引入到另外一个规则集的方式

2.1 常规混入

1. 在一个规则集中使用另外一个规则集中的全部属性：selector()

.border {
   
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.cls {
   
  .border();  //这里的括号加不加都可以
}

编译的 CSS 代码：

.border {
   
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.cls {
   
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

2. 可以定义隐式的混入，即可以供其他规则集复用，但该规则集不会出现在 CSS 代码中

.border() {
   
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.cls {
   
  .border();
}

编译的 CSS 代码：

.cls {
   
  border-top: dotted 1px black;
  border-bottom