Less预处理器教程

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、Less介绍

less官方文档 lesscss.org/

less中文文档 less.bootcss.com/

less是一种css预处理器，它扩展了css语言，提供了变量、嵌套、混合、运算等功能，使样式表的编写更加灵活和高效，用来书写css的工具。

通俗的说，less是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。

二、什么是预处理(预编译)

预处理（或预编译）就像在做甜点之前，你有一份简单的食谱（css），但你想要加入一些特殊的烘焙材料，以便更方便地制作美味的点心。less 就是你的烘焙助手，负责在烘焙之前对这份食谱进行一些特殊的处理，通过预处理，让你更轻松、更有创意地制作出令人垂涎欲滴的点心。 预处理就可以将less文件代码转换为css代码。

注意在less文件中，less代码格式并不能被浏览器识别。想将less文件代码变成css代码，必须先将这个less文件预先进行处理。

三、Less的使用

1. 安装Less

首先，确保你的项目中已经安装了less。你可以使用npm安装less：

npm install -g less

或者通过CDN在HTML文件中引入less：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

2. 基础语法

变量

在LESS中，你可以使用变量来存储和重用值。变量以@符号开头。

@width: 100px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
  background-color: aqua;
}

在这个例子中，@width是一个变量，它的值是100px。在#header中，我们使用了这个变量来设置背景颜色。

嵌套

LESS允许你使用嵌套规则，使样式表更加清晰和结构化。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
    margin-right: 5px;
    a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
        color: red;
      }
    }
  }
}

在这个例子中，nav规则包含了嵌套的ul、li和a规则。这样可以更容易地理解和组织样式。

混合（Mixin）

混合允许你在一个样式规则中引入另一个样式规则的属性。

.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.button {
  .border-radius(5px);
}

在这个例子中，.border-radius是一个混合，它接受一个@radius参数，并在.button规则中使用该混合来添加圆角边框。

导入其他Less文件

你可以使用@import导入其他less文件，将样式表模块化。

@import "reset";
@import "variables";
@import "mixins";

这个例子展示了如何导入名为reset.less、variables.less和mixins.less的文件。这样可以将样式表分割成更小的部分，使代码更易维护。

3. 运算

less允许进行基本的数学运算，这对于处理尺寸和颜色等方面很有用。

@base: 30px;
@padding: @base * 2;

.element {
  margin: @base + 5px;
  padding: @padding;
  background-color: aqua;
}

在这个例子中，@padding的值是@base乘以2。less会自动计算结果，你可以在样式规则中直接使用这些运算结果。

4. 函数与操作

less内置了一些函数和操作，用于处理颜色、字符串和其他数据类型。

@color: #3498db;

.darken-bg(@color, @percent) {
  background-color: darken(@color, @percent);
}

.container {
  .darken-bg(@color, 10%);
}

在这个例子中，darken是less内置的颜色函数，我们通过darken函数降低背景颜色的亮度。

5. 条件语句

less支持使用条件语句，根据条件选择应用样式。

@width: 100px;

.condiction {
  width: @width;
  height: @width;

  & when (@width > 500) {
    background-color: red;
  }

  & when (@width <= 500) {
    background-color: blue;
  }
}

在这个例子中，使用& when语法根据@width的值应用不同的背景颜色。

6. 循环

less还支持循环，允许你重复应用样式。

.loop(@counter) when (@counter > 0) {
  .class-@{counter} {
    width: @counter * 10px;
  }
  .loop(@counter - 1);
}

.loop(5);

在这个例子中，.loop混合使用了递归来创建一系列带有不同宽度的样式类。

7.嵌套规则的作用域

嵌套规则在less中有自己的作用域，这意味着你可以更灵活地组织样式。

#header {
  h1 {
    font-size: 26px;
  }
}

#footer {
  h1 {
    font-size: 18px;
  }
}

在这个例子中，h1规则在#header和#footer中分别有不同的作用域。

8.字符串插值

字符串插值允许你在样式中动态使用变量。

@property: color;

.widget {
  @{property}: #888;
  background-@{property}: red;
}

在这个例子中，使用@{}语法插入变量，创建动态的属性名称。

9. 编译Less

要在本地编译 less 文件，你可以使用 lessc 命令行工具。首先，确保你已经在终端或命令提示符中安装了 less：npm install less -g

然后，在less文件所在目录运行以下命令：

lessc your-styles.less output.css

其中，your-styles.less 是你的less文件，output.css 是输出的css文件。 或者使用构建工具，如webpack、gulp等，配置相应的less插件进行自动编译。 编译完成后，你可以在浏览器中链接到生成的css文件，以查看效果。