LESS extends 技巧：如何使样式表更加精简
LESS extends 是一种多重继承的方式，让你可以从一些基本的样式中，派生出其他新的样式，同时让样式表变得更加精简。
LESS extends 的语法非常简单，只需要使用 @extend 指令，后面接继承的类名，就可以将当前样式和指定的基本样式合并。
-- -------------------- ---- -------
-----
------ ------
------- ------
----------------- -----
-
---------
------- -----
------ ------
------- ------
-在上面的例子中，.box-big 继承了 .box 的属性，同时又定义了自己的宽和高。
LESS extends 的优点是，可以让我们减少重复的代码，缩短样式表的大小，并且可以使样式表更加易于维护。但是需要注意，过度使用 @extend 可能会导致样式表的复杂性增加，可能会导致意料之外的样式表的行为。
下面我们来看一些使用 LESS extends 的技巧，让你的样式表更加精简。
- 继承多个类
-- -------------------- ---- -------
--------
-------- -------------
-------- --- -----
---------- -----
------------ -----
----------- -------
-
----------------
------- --------
----------------- --------
------ -----
-
------------------
------- --------
----------------- -----
------ --------
------- --- ----- --------
-上面的例子中，.button-primary 和 .button-secondary 都继承了 .button 类，并添加了自己的背景色、前景色等属性。这使得我们可以将很多基础样式封装为一个通用的类，需要使用这些样式时，只需要 @extend 即可。
- 继承伪元素
LESS extends 不仅可以继承类，还可以继承伪元素。
-- -------------------- ---- -------
------------
-------- ------ -------
-
--------------------
------- ------------
------------ -----
------------ ----
-在上面的例子中，我们继承了 .btn::after 伪元素，在 .btn-primary 中又添加了一些新的属性。
- 继承属性
除了继承类和伪元素外，还可以继承属性。
-- -------------------- ---- -------
-----
------ ------
------- ------
------- -----
-------- -----
-
-------------
------- -----
----------------- --------
------ -----
------- --- ----- --------
----------- - - --- ---------------
-上面的例子中，我们继承了 .box 的宽、高、边距和内边距，然后在 .box-primary 中添加了自己的背景色、前景色、边框、阴影等属性。
- 继承默认值
在 LESS 中，可以使用 @default 指令来指定变量的默认值，在继承时也可以继承这个默认值。
-- -------------------- ---- -------
------- --------
--------
----------------- -------
------ ------
------- -----
-
----------------
------- --------
-
------------------
------- --------
------- -----
------ -------
------- --- ----- -------
-上面的例子中，我们定义了一个默认的颜色变量 @color，然后在 .button 中使用了这个变量，并继承到了 .button-primary 中。在 .button-secondary 中，我们覆盖了变量的值，并继承了 .button 的其他属性。
总结
LESS extends 是一种非常强大的语法，可以让我们更加高效地编写样式表。不过，在使用的时候需要注意一些细节，不要过度使用，以免导致样式表的不可预测行为。不管怎么样，这是一项非常棒的技术，为前端开发带来了很多便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2c9a5f6b2d6eab3e0f4dc