前言
LESS（Leaner Style Sheets）是一种 CSS 预处理语言，它扩展了 CSS 语法并添加了许多特性，如变量、混合（Mixin）、继承、嵌套等。其中混合和继承是 LESS 中最常用的特性之一。
混合和继承可以让我们重用代码，降低代码冗余度，提高开发效率。但是在实际使用中，我们也需要考虑它们的性能问题。因为混合和继承会导致样式规则的重复和冗余，从而影响网页性能。
本文将分析 LESS 中的混合和继承的性能问题，并提供一些优化方案和建议。
混合
什么是混合
混合是 LESS 中一种将一组 CSS 规则集合在一起的方式，使用 . 开头的 .className { ... } 语法来定义。混合可以包含任意数量的 CSS 属性和值。
我们可以使用 . 开头的 .className 选择器来调用一个混合，从而将混合中定义的所有 CSS 规则应用到当前选择器上。例如：
-- -------------------- ---- ------- -------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ---- - ----------- -
在编译后的 CSS 代码中，.nav 选择器中将包含 .myMixin 中定义的所有 CSS 规则：
.nav {
color: #fff;
background-color: #f00;
border-bottom: 1px solid #000;
}混合的性能问题
混合可以重用代码，降低代码冗余度。但是在调用混合时，其定义的样式规则将被复制到当前选择器中，导致 CSS 代码的冗余和样式规则的重复。
特别是在多次调用同一个混合时，这种重复的情况会更加明显，从而影响网页性能。
例如，下面代码中，我们多次调用了相同的 .myMixin 混合：
-- -------------------- ---- ------- -------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ---- - ----------- - -------- - ----------- - ------- - ----------- - ------- - ----------- -
在编译后的 CSS 代码中，.myMixin 中定义的样式规则被复制到了每一个选择器中，导致了 CSS 冗余和样式规则的重复：
-- -------------------- ---- ------- ---- - ------ ----- ----------------- ----- -------------- --- ----- ----- - -------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ------- - ------ ----- ----------------- ----- -------------- --- ----- ----- -
这里，在编译后的 CSS 文件中，color: #fff、background-color: #f00 和 border-bottom: 1px solid #000 这三个样式规则被重复了多次，从而导致了 CSS 冗余和样式规则的重复。
这种冗余和重复的情况，不仅会增加浏览器渲染时间，还会增加 CSS 文件的文件大小，导致网页加载速度变慢。
混合的优化
为了避免混合导致的重复和冗余，我们需要使用 mixin，也就是带参数的混合。使用 mixin 可以避免混合中定义的样式规则被复制到不需要的选择器中。
我们可以使用 @arguments 变量来传递 mixin 中的参数。使用 ... 来声明一个 mixin，并在调用时传递相应的参数。例如：
-- -------------------- ---- ------- ---------------- ----- ---- ----- -------- ----- - ------ ------- ----------------- ---- -------------- --- ----- -------- - ---- - -------------- ----- ------ - -------- - -------------- ----- ------ - ------- - -------------- ----- ------ - ------- - -------------- ----- ------ -
在编译后的 CSS 文件中，.myMixin 中定义的样式规则只会被编译一次，并在调用时传递相应的参数：
-- -------------------- ---- ------- ---- - ------ ----- ----------------- ----- -------------- --- ----- ----- - -------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ------- - ------ ----- ----------------- ----- -------------- --- ----- ----- - ------- - ------ ----- ----------------- ----- -------------- --- ----- ----- -
这里，.myMixin 中定义的样式规则只被编译一次，并在调用时传递相应的参数。
这种优化方案能够有效地避免定义的样式规则在多个选择器中被重复和冗余，以提高网页的性能。
继承
什么是继承
继承是 LESS 中一种将 CSS 规则从一个选择器“继承”到另一个选择器的方式，使用 & 来表示当前选择器的父选择器。
例如：
-- -------------------- ---- -------
------ -
------ -----
-
----------- -
------- -
------------ -----
-
-在编译后的 CSS 代码中，.error-text 选择器继承了 .error 的样式规则，并添加了 font-weight: bold; 样式规则：
.error {
color: #f00;
}
.error-text.error {
font-weight: bold;
}继承的性能问题
继承可以减少代码冗余度，提高开发效率。但是在实际使用中，当父选择器样式规则过多时，这种继承方式常常会导致样式规则的冗余和重复。
例如，下面的样式规则中，每个子选择器都继承了 .parent 选择器中所有的样式规则：
-- -------------------- ---- -------
------- -
------ -----
----------------- -----
---------- -----
-
-------- -
-------- -
-------- -----
-
-
-------- -
-------- -
------- -----
-
-
-------- -
-------- -
-------- -----
-
-
-------- -
-------- -
----------- -------
-
-在编译后的 CSS 文件中，每一个子选择器都包含了 .parent 的所有样式规则，导致了样式规则的冗余和重复：
-- -------------------- ---- ------- ------- - ------ ----- ----------------- ----- ---------- ----- - --------------- - ------ ----- ----------------- ----- ---------- ----- -------- ----- - --------------- - ------ ----- ----------------- ----- ---------- ----- ------- ----- - --------------- - ------ ----- ----------------- ----- ---------- ----- -------- ----- - --------------- - ------ ----- ----------------- ----- ---------- ----- ----------- ------- -
这种冗余和重复的情况，不仅会增加浏览器渲染时间，还会增加 CSS 文件的文件大小，导致网页加载速度变慢。
继承的优化
为了避免继承导致的冗余和重复，我们需要合理地使用继承，只继承必要的样式规则。
例如，下面的样式规则中，我们只继承了必要的 .parent 样式规则：
-- -------------------- ---- -------
------- -
------ -----
----------------- -----
---------- -----
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
-------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
-------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
----------- -------
-
-在编译后的 CSS 文件中，每个子选择器只继承了必要的样式规则：
-- -------------------- ---- ------- ------- - ------ ----- ----------------- ----- ---------- ----- - -------- - ------ ----- ----------------- ----- ---------- ----- - --------------- - -------- ----- - -------- - ------ ----- ----------------- ----- ---------- ----- - --------------- - ------- ----- - -------- - ------ ----- ----------------- ----- ---------- ----- - --------------- - -------- ----- - -------- - ------ ----- ----------------- ----- ---------- ----- - --------------- - ----------- ------- -
这种优化方案能够避免不必要的样式规则被继承，提高网页性能。
结论
在 LESS 中，混合和继承是优秀的样式技术，但是存在性能问题。为了避免这些问题，我们需要优化混合和继承的使用。
对于混合，我们可以使用 mixin 来避免样式规则的冗余和重复。对于继承，我们需要合理地使用继承，只继承必要的样式规则。
通过这些优化，我们可以最大程度地提升网页的性能和用户体验。
示例代码
混合
-- -------------------- ---- ------- -- -- ---------------- ----- ---- ----- -------- ----- - ------ ------- ----------------- ---- -------------- --- ----- -------- - -- ---- ---- - -------------- ----- ------ - -------- - -------------- ----- ------ - ------- - -------------- ----- ------ - ------- - -------------- ----- ------ -
继承
-- -------------------- ---- -------
-- --
------- -
------ -----
----------------- -----
---------- -----
-
-- ----
-------- -
------ -----
----------------- -----
---------- -----
-------- -
-------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
-------- -----
-
-
-------- -
------ -----
----------------- -----
---------- -----
-------- -
----------- -------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67138142ad1e889fe20d7219