如何在 LESS 中使用类似 SASS 中的占位符选择器？-JavaScript中文网-JavaScript教程资源分享门户

介绍

LESS 是一种动态样式语言，它是 CSS 的一种拓展语言，继承了 CSS 的基本语法，而在此基础上增加了变量、Mixin、函数等特性，以帮助前端工程师坚持 DRY（Don't Repeat Yourself）原则。同时，LESS 还提供了类似 SASS 中占位符选择器的特性，即 placeholder selectors。通过能够在项目中使用占位符选择器，而不仅仅是普通的选择器，可以减少代码中的重复代码，使得样式更易于维护。

在本篇文章中，我们将重点介绍在 LESS 中如何使用占位符选择器，并且会提供示例代码。

占位符选择器的定义

占位符选择器是一种特殊类型的选择器，在 SASS 中通过以 “%” 作为前缀来定义。

// 定义了一个占位符选择器
// 占位符选择器的定义以%为前缀
%placeholder-selector {
  display: flex;
  justify-content: center;
  align-items: center;
}

LESS 中占位符选择器的使用

在 LESS 中，则需要通过类似Mixin的方式定义占位符选择器，与SASS不同的是，变量占位符标识符是“@”。

// 在LESS中定义占位符选择器
// 占位符选择器的定义以@为前缀
@placeholder-selector {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用时，需要通过 & 符号，引用占位符选择器的名称：

// 在一个选择器中使用占位符选择器
.container {
  &::before {
    content: "";
    @placeholder-selector;
  }
}

以上代码中使用了占位符选择器.@placeholder-selector 作为混合器，混入到.container::before 中。当然，你也可以将占位符选择器与普通选择器一起混合。

// 使用占位符选择器和普通选择器一起混合
.toggle-button {
  @placeholder-selector;
  color: white;
  background-color: #f44336;
  border-radius: 5px;
  padding: 6px 12px;
}

占位符选择器与Mixin 的区别

虽然在使用方法上，占位符选择器像Mixin，但是两者之间是有区别的：

编译时机

占位符选择器在编译时不会生成任何 CSS 代码，只有在被引用（混入）到普通选择器中时才会生成代码。而Mixin 在定义时会生成 CSS 代码，不论是否被引用，都会生成代码。

多继承

占位符选择器可以实现多继承的功能，可以作为多个选择器的基类，而Mixin 只能实现单继承。

条件混合

Mixin 可以用在 @if 语句中，根据条件混合进入样式表。而占位符选择器不行，它本身不会生成任何 CSS 代码。

总结

在 LESS 中，占位符选择器是一种很方便的工具，可以帮助开发者减少代码量，提高可维护性，同时也可以作为多重样式继承的工具，为工程师提供更多便利。但是占位符选择器与Mixin 之间还是有区别的，开发者选择使用时应该注意这些细节。

示例代码

// javascriptcn.com 代码示例
// 定义一个占位符选择器
@placeholder-selector {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用占位符选择器和普通选择器一起混合
.toggle-button {
  @placeholder-selector;
  color: white;
  background-color: #f44336;
  border-radius: 5px;
  padding: 6px 12px;
}

// 在一个选择器中使用占位符选择器
.container {
  &::before {
    content: "";
    @placeholder-selector;
  }
}

参考资料

LESS - Placeholder Selectors

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