LESS中@extend 的坑,如何避免?

阅读时长 3 分钟读完

LESS 是一种 CSS 预处理器,它可以让我们编写更优雅、更方便的 CSS。其中 @extend 是 LESS 中最常用的一种样式继承方式,它可以让我们无需重复编写相同的 CSS 样式,实现代码复用。但是,@extend 也有一些潜在的问题,我们需要注意并避免。

@extend 的基本使用方法

在 LESS 中,我们可以使用 @extend 关键字来继承已存在的 CSS 类。假设我们有两个 CSS 类:

-- -------------------- ---- -------
---- -
  -------- ---- -----
  ----------------- -----
  ------ -----
  ------- -----
-

---------- -
  ---------- -----
-

我们可以通过 @extend 来实现样式继承:

-- -------------------- ---- -------
------------ -
  ------- -----
  ----------------- -----
-

------------------ -
  ------- -----------
  ------- -------------
-

这样,.btn-primary-small 类就拥有了 .btn-primary 和 .btn-small 两个类的样式。

@extend 的潜在问题

虽然 @extend 在编写 CSS 时会让我们变得更加高效,但是它也存在潜在的问题。假设我们有以下三个 CSS 类:

-- -------------------- ---- -------
---- -
  -------- ---- -----
  ----------------- -----
  ------ -----
  ------- -----
-

------------ -
  ------- -----
  ----------------- -----
-

---------- -
  ---------- -----
-

如果我们想让一个按钮拥有 .btn-primary 和 .btn-small 样式,在 LESS 中,我们可以这样写:

在生成的 CSS 中,.btn-primary-small 类将继承 .btn-primary 和 .btn-small 类的样式。但是,如果我们有以下代码:

这时,.btn-primary-small 类同时继承了 .btn-primary 类和 .btn-secondary 类的样式,这可能会导致样式不符合预期。

如何避免@extend 的问题

为了避免上述问题,在 LESS 中,我们可以利用@{&}语法来限制继承:

-- -------------------- ---- -------
------------------ -
  ------------ -
    ---------------
    ----------------- -----
  -
  ---------- -
    ---------------
  -
-

这样,即使有新的 .btn 类被添加进来,在使用 @extend 继承时也不会影响到其他样式类。同时,我们在添加新的样式时也需要注意避免对外部样式造成影响。

总结

LESS 中的 @extend 关键字可以让我们在编写 CSS 时变得更加高效。但是,当我们使用@extend 时,也需要留意其潜在问题。通过 @extend 的限制,我们可以更好地避免潜在问题的出现。最后,我们在编写 CSS 时,需要注意 CSS 的可维护性和可读性,不要让 @extend 带来的便利成为不可维护的负担。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ab50cd48841e989472654c

纠错
反馈