LESS 中的继承规则需要注意些什么？-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，通过可编程的样式语言扩展了 CSS。其中，继承是 LESS 的一个重要功能之一，它可以让样式的复用更加简单方便。但是，在使用 LESS 继承时，需要注意一些规则，本文将对这些规则进行详细介绍和解释。

LESS 继承的基本语法

在 LESS 中，使用 & 符号表示继承，它表示的是目标元素本身。例如，下面的代码将 button 元素的样式设置为 a 元素的样式：

button {
  &:extend(a);
}
a {
  color: blue;
  text-decoration: none;
}

上述代码将生成以下 CSS 代码：

a, button {
  color: blue;
  text-decoration: none;
}

代码中，button 在使用 &:extend(a) 后，将继承 a 元素的样式，生成的 CSS 选择器为 .a, .button。

LESS 继承的注意事项

继承目标只能是选择器

在 LESS 中，继承只能针对选择器进行使用，而不能继承属性值。例如，在下面的代码中，尝试继承属性将会抛出编译错误：

button {
  color: red;
  &:extend(.special-color); /* 错误的使用方式 */
}
.special-color {
  color: blue;
}

正确的使用方式是使用选择器，将 .special-color 作为选择器传递给 &:extend：

button {
  color: red;
  &:extend(.special-color all); /* 正确的使用方式 */
}
.special-color {
  color: blue;
}

在上述代码中，all 参数指定了继承的方式。如果不指定参数，LESS 默认会将所有属性都继承过来。

避免出现嵌套

在 LESS 中，嵌套的作用是可读性更好，但是，在继承中使用嵌套将会引发一些问题。注意，继承并不会像 mixin 一样进行一次性的代码块替换，而是生成新的选择器。下面的代码展示了一个有嵌套的继承示例：

// javascriptcn.com 代码示例
ul {
  li {
    background-color: #eee;
    height: 30px;
  }
}
nav {
  ul li:first-child {
    height: auto;
    &:extend(ul li);
  }
}

上述代码将生成以下 CSS 代码：

ul li, nav ul li:first-child {
  background-color: #eee;
  height: 30px;
}
nav ul li:first-child {
  height: auto;
}

在上述代码中，尽管 nav 元素的嵌套层级只有一级，但是它仍然生成了额外的选择器。这会导致代码体积增大，性能下降，因此，应该避免嵌套的写法。

继承引用的位置需要注意

在 LESS 中，使用 &:extend 继承时，引用所在选择器的位置对于生成的选择器是非常重要的。下面的代码展示了一个继承引用位置的示例：

// javascriptcn.com 代码示例
ul {
  li {
    background-color: #eee;
    height: 30px;
  }
}
nav {
  ul {
    li:first-child {
      height: auto;
      &:extend(ul li); /* 引用位置不正确 */
    }
  }
}

上述代码将生成以下 CSS 代码：

ul li {
  background-color: #eee;
  height: 30px;
}
nav ul li:first-child,
ul li:first-child {
  height: auto;
}

可以看到，&:extend(ul li) 所继承的选择器并不是 nav ul li:first-child，而是 ul li:first-child。要解决这个问题，可以使用 @{} 占位符，以保证引用位置的正确性：

// javascriptcn.com 代码示例
ul {
  li {
    background-color: #eee;
    height: 30px;
  }
}
nav {
  ul {
    li:first-child {
      height: auto;
      &:extend(@{&}); /* 正确的引用位置 */
    }
  }
}

上述代码将生成以下 CSS 代码：

ul li {
  background-color: #eee;
  height: 30px;
}
nav ul li:first-child {
  height: auto;
  background-color: #eee;
}

在上述代码中，使用占位符 @{&} 将引用位置设置为正确的位置。

大量继承可能影响性能

在 LESS 中，继承的作用是让样式复用更加简单方便，但是，如果过量使用继承，将会影响网页性能。这是因为，继承会生成额外的选择器，导致样式冗余。而冗余的选择器越多，样式表的体积就越大，网页的加载速度就越慢。因此，应该控制继承的使用量，适时避免过多的使用。

总结

LESS 中的继承规则对于前端开发非常重要，有助于提高代码复用性和开发效率。但是，在使用继承时也需要注意避免出现嵌套、引用位置不正确等问题，以免影响网页性能。为了避免继承对网页性能产生负面影响，应适当控制继承的使用量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65420c287d4982a6ebbb18e1