选择器函数

约 945 字大约 3 分钟

2025-04-12

Sass 提供了一系列选择器函数，用于动态生成、操作和检查 CSS 选择器。这些函数在处理复杂选择器逻辑、复用代码或构建高级样式系统时非常有用。以下是核心选择器函数的分类详解与实战示例：

一、选择器操作函数

1. `selector.unify($selector1, $selector2)`

作用：合并两个选择器，生成它们的共有父级选择器。
适用场景：创建复合选择器或条件性组合类名。

$button: ".btn";
$primary: ".primary";

// 合并生成 .btn.primary
$combined: selector.unify($button, $primary);
#{$combined} {
  background: #3498db;
}

编译后：

.btn.primary {
  background: #3498db;
}

2. `selector.extend($selector, $extendee, $extender)`

作用：模拟 @extend 功能，将一个选择器的样式扩展到另一个选择器。
适用场景：动态生成继承关系。

%message-shared {
  border: 1px solid;
}

.error {
  @extend %message-shared;
  border-color: red;
}

// 使用函数扩展
$new-selector: selector.extend(".warning", "%message-shared", ".warning");
#{$new-selector} {
  border-color: orange;
}

编译后：

.error,
.warning {
  border: 1px solid;
}

.error {
  border-color: red;
}

.warning {
  border-color: orange;
}

二、选择器解析函数

1. `selector.parse($selector)`

作用：将字符串解析为选择器对象，便于后续操作。
适用场景：动态构建或修改选择器。

$selector: selector.parse("ul > li.active");
// 输出结构化的选择器对象
@debug $selector; // (复合选择器: (ul > li.active))

2. `selector.nest($selectors...)`

作用：嵌套多个选择器，生成后代选择器。
适用场景：BEM 或其他命名规范中的层级构建。

$block: "menu";
$element: "item";

// 生成 .menu__item
$bem-selector: selector.nest($block, "__" + $element);
#{$bem-selector} {
  padding: 10px;
}

编译后：

.menu__item {
  padding: 10px;
}

三、选择器检查函数

1. `selector.is-superselector($super, $sub)`

作用：检查 $super 是否是 $sub 的父级选择器。
适用场景：验证选择器继承关系。

$parent: ".container .item";
$child: ".item";

@if selector.is-superselector($parent, $child) {
  @debug "#{$parent} 是 #{$child} 的父级";
} @else {
  @debug "无继承关系";
}
// 输出：Debug: .container .item 是 .item 的父级

2. `selector.replace($selector, $original, $replacement)`

作用：替换选择器中的某部分。
适用场景：动态修改主题类名前缀。

$old-selector: ".theme-dark .button";
$new-selector: selector.replace($old-selector, "theme-dark", "theme-light");

// 输出 .theme-light .button
#{$new-selector} {
  background: white;
}

四、组合函数实战示例

场景：响应式工具类生成器

@mixin responsive-modifier($breakpoint) {
  $base: selector.parse(".component");
  $modifier: selector.parse("--#{$breakpoint}");

  // 合并生成 .component--md
  $combined: selector.unify($base, $modifier);

  @media (min-width: map-get($breakpoints, $breakpoint)) {
    #{$combined} {
      @content;
    }
  }
}

// 使用
@include responsive-modifier("md") {
  padding: 2rem;
}

编译后：

@media (min-width: 768px) {
  .component--md {
    padding: 2rem;
  }
}

五、注意事项与技巧

选择器对象结构
使用 @debug 输出选择器对象时，会显示为嵌套列表结构，例如：
(复合选择器: ('.header', ' ', '.nav')) 对应 .header .nav
避免过度嵌套
复杂的选择器操作可能导致最终 CSS 选择器冗余，影响性能。

与 @at-root 配合
结合 @at-root 突破嵌套层级，精准控制输出位置：

.parent {
  @at-root #{selector.unify("html.dark", &)} {
    background: #333;
  }
}

编译后：

html.dark .parent {
  background: #333;
}

六、最佳实践

模块化选择器构建
将基础选择器存储为变量，通过函数组合生成衍生类名：

$prefix: "ui";
$button: selector.parse(".#{$prefix}-button");
$disabled: selector.parse(".-disabled");

// 生成 .ui-button.-disabled
$state: selector.unify($button, $disabled);

主题切换系统
动态替换主题类名前缀：

@function apply-theme($selector, $theme) {
  @return selector.replace($selector, "theme-base", "theme-#{$theme}");
}

$themed-btn: apply-theme(".theme-base .btn", "dark");
#{$themed-btn} {
  background: #222;
}

自动化 BEM 生成
封装混合宏自动处理元素和修饰符：

@mixin element($name) {
  $e: selector.nest(&, "__#{$name}");
  @at-root #{$e} {
    @content;
  }
}

.block {
  @include element("item") {
    color: red;
  }
}

七、总结

通过灵活运用 Sass 选择器函数，你可以实现 动态选择器生成、样式继承管理 和 复杂选择器逻辑处理，显著提升大型项目的样式代码可维护性。关键是在实际开发中找到代码复用与可读性的平衡点。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24