CSS 预处理器 LESS 学习笔记-JavaScript中文网-JavaScript教程资源分享门户

CSS 预处理器 LESS 是一个基于CSS语法的动态样式语言，它扩展了CSS的语言能力，使得CSS更易维护、更易扩展。它支持诸如变量、函数、嵌套选择器等功能。LESS 提供了更加简洁、优雅的语法，大大减少了CSS代码的冗余，提升了代码的可读性和可维护性。

LESS 入门

安装LESS

首先，在你的项目中使用 LESS 需要安装 LESS 编译器，LESS 官方提供的命令行工具 lessc 是一个 Node.js 的应用程序，需要事先安装好 Node.js 才能使用。

安装 Node.js

LESS 编译器依赖于 Node.js 环境，因此在安装 LESS 之前，需要先安装 Node.js 。
安装 LESS 编译器

安装 LESS 编译器需要使用 Node.js 的包管理工具 npm，使用下面的命令安装最新版本的 LESS编译器：
```
npm install -g less
```
-g 表示全局安装，这样可以在命令行中直接使用 lessc 命令。

LESS 基本语法

LESS 的语法和 CSS 很相似，但它提供了一些新特性来让我们写更加精简，可读性更高的代码。

变量

在 LESS 中，可以使用变量来存储颜色、字体等一些常用的属性值，从而更加方便的使用这些属性值。
```
@base-color: #03a9f4;
.btn {
    color: @base-color;
    background-color: darken(@base-color, 10%);
}
```
上述代码给 @base-color 赋值 #03a9f4 ，然后在 .btn 选择器中使用 @base-color 变量定义颜色，可以看到使用了 LESS 的内置函数 darken ，可以让颜色变暗。
嵌套选择器

在 LESS 中，可以使用嵌套选择器来显式地表示状态之间的层次关系，从而使 CSS 代码结构更加清晰。
```
-- -------------------- ---- -------
----- -
    ------ -
        ---------- -----
        -------------- -----
    -
    -------- -
        - -
            ------------ ----
            - -
                ------ --------
            -
        -
    -
-
```
在上述代码中，我们可以看到选择器 .main 和 .content 分别作为 .title 的父选择器，从而指定了不同的样式规则。
函数

LESS 内置了很多函数来处理颜色、数值和字符串等，从而使得我们可以更加便捷地处理样式属性。
```
@width: 100px;
.box {
    width: @width + 10px;
    height: round(2.5);
    float: left;
}
```
上述代码展示了 LESS 中常用的三种函数，+ 表示加法运算，round 表示四舍五入到最近的整数，float 表示浮动。

LESS 进阶

mixin（混合）

在 LESS 中，mixin 是一种将多个 CSS 规则合并成一个规则集的方法，从而实现代码复用。

-- -------------------- ---- -------
-------------- ----- -
    ------ ------
    ------- ------
-
----- -
    ----------
    ----------------- ----
-
----- -
    --------------
    ----------------- -----
-

上述代码定义了一个混合器 .square ，默认大小为 20px ，然后通过 .box1 和 .box2 两个选择器调用了 .square ，并传入不同的参数和背景颜色。

参数和作用域

在 mixin 中，我们可以使用参数来传递信息，从而更好的控制样式。同时，LESS 还支持在 mixin 中定义局部变量，不会对全局变量造成任何影响。

-- -------------------- ---- -------
------- ------
-------------- ------- -
    ------ ------
    ------- ------
-
----- -
    ----------
    ----------------- ----
-
----- -
    ------- ------
    ----------
    ----------------- -----
-

上述代码展示了 mixin 中的参数和 LESS 中的变量作用域。在 box2 中重新定义了全局变量 @width，然后调用了 .square ，此时的 @size 参数会默认为 300px。

Extend

在 LESS 中，可以通过 @extend 关键字将一些选择器的样式规则扩展到另外的选择器中，并且保持代码的可读性和可维护性。

-- -------------------- ---- -------
------- -
    ------- --- ----- --------
    ------ --------
    ------- -
        ----------------- --------
        ------ -----
    -
-

-------- -
    ------- --------
    ----------------- -----
    ------ --------
-

上述代码中，我们定义了一个 .button 的选择器，并为它设置了一些样式规则以及一些伪类。然后，通过 @extend 关键字，将 .button 的样式规则扩展到了 .button1 上，并且添加了一些新的样式规则。

总结

LESS 作为 CSS 预处理器中的一员，提供了许多优秀的语法和功能。通过变量、嵌套选择器、函数、混合器、参数、作用域和 extrend 等技术，使我们更加方便和灵活地编写优秀的样式代码，并且提高了CSS代码的可读性和可维护性。应该说，LESS 已经成为了现代 Web 开发中的必备技能之一。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f19be7f6b2d6eab3b6de15

CSS 预处理器 LESS 学习笔记