在LESS中，extend有什么用途？-猿码集

1. 介绍

LESS是一种CSS预处理器，它增强了CSS的功能，使其更易维护和扩展。其中，extend是LESS的一个非常强大的功能，它可以让你在样式表中重复使用已有的样式，并且可以避免代码的重复。在本文中，我们将一步步地讨论，在LESS中，extend有什么用途。

2. Extend的语法

在LESS中，使用extend很简单，只需要使用“&:extend(选择器)”这样的语法即可。例如：


.box {
  width: 100px;
  height: 100px;
} 
.button {
  &:extend(.box); // 继承.box的样式
  background-color: red;
}

在上面的例子中，使用了extend让.button类继承了.box类的样式，并且在此基础上添加了背景颜色。这段代码生成的CSS样式如下：


.box,
.button {
  width: 100px;
  height: 100px;
}
.button {
  background-color: red;
}

3. Extend的作用

3.1 去重复

Extend最基本的作用就是去重复，避免写重复的样式代码。例如，一个网站中有很多个地方都需要用到一个通用的样式：


.btn {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1em;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 4px;
}

我们可以通过extend来重用这个通用的样式，并且在此基础上做出一些调整：


.btn-primary {
  &:extend(.btn); // 继承.btn的样式
  background-color: #f0ad4e; // 修改背景色
}
.btn-danger {
  &:extend(.btn);
  background-color: #d9534f;
}

通过extend，我们可以将btn的样式代码重用于.btn-primary和.btn-danger这两个类，避免代码的重复。上面的代码生成的CSS样式如下：


.btn,
.btn-primary,
.btn-danger {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1em;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.btn,
.btn-primary {
  background-color: #333;
}
.btn-primary {
  background-color: #f0ad4e;
}
.btn-danger {
  background-color: #d9534f;
}

注意，extend会将选择器一同继承，因此如果有两个选择器中间带有空格，则不会继承。

3.2 简化样式表结构

通过extend，我们可以将一组样式重用于多个选择器，从而简化样式表的结构。例如，我们可以将边框样式重用于多个元素：


.border {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.box {
  &:extend(.border);
  width: 100px;
  height: 100px;
}
.button {
  &:extend(.border);
  background-color: #333;
  color: #fff;
  padding: 0.5em 1em;
}

在上面的代码中，我们将“.box”和“.button”两个选择器重用了“.border”选择器中的边框样式。这样可以使CSS代码更为简洁、易读。

3.3 优化代码性能

由于extend会将样式预先计算出来，因此它可以提升代码的性能。使用extend可以避免样式重复，从而减少CSS文件的大小，降低浏览器下载的时间。

4. 注意事项

虽然extend是一个很强大的功能，但是在使用的过程中也需要注意一些问题：

4.1 不要滥用extend

对于一些通用的样式（如上面提到的.btn类），我们可以使用extend来降低代码重复。但是对于一些特定的样式，我们应该谨慎使用extend，因为过度使用会使代码变得难以理解和维护。

4.2 不要以ID作为extend的选择器

在使用extend的过程中，我们应该避免使用ID选择器作为选择器。因为ID选择器的权重过高，会对代码性能产生负面影响。

4.3 不要使用嵌套extend

虽然在LESS中支持嵌套，但是在使用extend时，我们应该避免使用嵌套extend。因为嵌套extend会导致CSS文件中嵌套层数过多，影响代码性能和结构的清晰度。

5. 总结

在LESS中，extend是一种非常强大的功能，它可以让我们重复使用已有的样式，并且避免代码的重复。使用extend可以降低CSS文件的大小，提高代码性能。在使用extend的时候，我们需要注意不要滥用、不要以ID作为选择器，不要使用嵌套extend等问题。

在LESS中，extend有什么用途？