介绍
Less 是一种 CSS 预编译器，可以让 CSS 编写更加方便和可维护。它提供了一些高级的功能，如变量、Mixin、嵌套、运算符等等。其中，Set 和 Basic-Function 是 Less 中比较重要的概念，也是我们需要掌握的一些技术。在本文中，我们将详细介绍 Less 中如何使用 Set 和 Basic-Function，并给出一些实例代码和实际应用场景。
Set
Set 是 Less 中的一种数据结构，类似于 Javascript 中的对象。通过 Set，我们可以定义一组 CSS 属性和值，使用时可以快速地调用这些属性值。Set 是一种集合，其中每个成员都是一个变量，可以用作 Less 文件中的常量。
定义 Set
使用 Less 定义 Set，可以使用 @symbol 表示符号，@value 表示值，例如：
@icons: {
home: "\e601";
settings: "\e602";
search: "\e603";
}其中，我们定义了一个名为 @icons 的 Set，括号中有三个键值对，分别是 home、settings 和 search。每个键的值都是一个表示 Icon 的 Unicode 字符。这种方式的定义方式可以使代码更加清晰和可维护。
访问 Set
通过定义的 Set，我们可以在 Less 文件中访问里面的值。在 Less 文件中，使用关键字 extract() 可以获取 Set 中指定键的值。例如：
.icon-home {
content: extract(@icons, home);
}这段代码将 @icon Set 中的 home 键的值取出来，赋值给 content 属性。
在 Set 中嵌套 Set
在实际使用过程中，我们常常需要将一个 Set 嵌套在另一个 Set 中，以达到更好的管理效果。例如：
-- -------------------- ---- -------
-------- -
------ -
-------- --------
---------- --------
--
----- -
-------- --------
---------- --------
-
-我们定义了一个名为 @themes 的 Set，其中包含 light 和 dark 两个键，它们的值都是一个 Set。在定义的过程中，我们为每个主题定义了两个颜色值，用以区分主题样式。
使用 Set 变量
在 Less 中，Set 变量可以用于定义类名、属性和值等。例如：
@theme: light;
@current-theme: extract(@themes, @theme);
.primary-color { color: extract(@current-theme, primary); }
.secondary-color { color: extract(@current-theme, secondary); }这段代码中，我们将 @themes Set 中的 light 键存入 @current-theme 变量中。然后，我们可以使用 extract() 函数来获取属性值，两个颜色值的取值分别是 @current-theme.primary 和 @current-theme.secondary。
Basic-Function
Basic-Function 是 Less 中的一个类型，它能够帮助我们实现许多有趣和实用的效果，例如计算和循环。在使用 Basic-Function 时，我们需要了解如何定义和使用 Mixin，以及如何使用内置的函数和运算符。
定义 Mixin
Mixin 是一种声名函数，它接收托管的变量和属性，然后生成合适的 CSS 规则。在 Less 中定义 Mixin，用 @mixin 表示。例如：
.making-table(@padding, @margin) {
padding: @padding;
margin: @margin;
}这个 Mixin 名为 making-table，需要接收 @padding 和 @margin 两个参数，并将他们分别赋值给 padding 和 margin 属性。
使用 Mixin
使用 Mixin 可以像调用函数一样，例如：
.table {
.making-table(10px, 20px);
}这段代码将 making-table Mixin 应用于 .table 类名上，同时将 10px 和 20px 分别传递给 padding 和 margin 参数。
内置函数和运算符
Less 中有许多内置函数和运算符，可以用于处理和操作数据。例如：
-- -------------------- ---- ------- -- ---- -------- -------- -------- ---------------- ----- -- ---- ------- ------ -------- ------ - -- -- ------ ------- ---------------- -- ------ ----------------- -------------- ---- -- ----------
这些函数和运算符极大地扩展了 Less 的应用场景。我们可以通过 Less 提供的多种函数和运算符，帮助我们处理变量、数值和样式等。
总结
Set 和 Basic-Function 是 Less 中两种比较重要的概念。Set 可以帮助我们定义常量、属性和值等，使 Less 文件更加清晰易读。Basic-Function 提供了多种函数和运算符，可以用于计算、过滤、变形和调整样式，扩大了 Less 文件的应用范围。在使用 Set 和 Basic-Function 的过程中，我们需要了解 Less 中的语法和内置函数运算符，以便快速编写出高效的 Less 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483002448841e989425cd43