怎样利用Less的detach ruleset机制实现可重用的CSS代码块-css教程-PHP中文网

Less 的 detach ruleset 是一种惰性样式容器，用 @name: { ... }; 定义，不自动输出 CSS，必须显式调用（如 @name();）才展开；它既不是存储值的变量，也不是默认执行的 mixin，而是支持嵌套、&、媒体查询内调用的可复用样式块。

怎样利用less的detach ruleset机制实现可重用的css代码块

什么是 Less 的 detach ruleset？它不是变量也不是 mixin

Less 的 detach ruleset 是一种特殊语法，用 @ruleset-name: { ... }; 定义，它不会立即输出 CSS，而是把样式块“存起来”，等你显式调用（比如用 .selector { @ruleset-name(); }）才展开。它和 @variable 不同：后者只能存值；也和 .mixin() 不同：后者默认会参与 CSS 输出（除非加 private 或命名空间隔离），而 detach ruleset 天然惰性、无副作用。

关键点在于：它支持参数、嵌套、访问父选择器（&），且可被多次复用在不同上下文中——这才是实现真正可组合 CSS 块的核心能力。

怎么定义带参数的 detach ruleset 并安全复用

直接写带参数的 ruleset 会报错：Detached rulesets cannot have parameters。正确做法是把它包裹进一个 mixin，再在 mixin 内部引用 ruleset：

@shadow-sm: {
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
};
.shadow(@color: #000) {
  @shadow-custom: {
    box-shadow: 0 2px 4px fade(@color, 20%);
  };
  @shadow-custom();
}
.card {
  @shadow-sm();
  .shadow(#333);
}

不能直接写 @shadow(@c) { ... } —— Less 不允许
必须用 mixin 封装 ruleset，才能传参；ruleset 本身只负责“内容组织”
ruleset 内部可自由使用 @color 等外部作用域变量，但要注意作用域链：mixin 调用时的上下文决定变量取值
如果 ruleset 需要访问父选择器（比如想给 .btn:hover 加样式），必须在调用处用 &:hover { @ruleset() }，ruleset 内不能写 &

为什么 detach ruleset 比普通 mixin 更适合抽象“视觉模式”

比如一组按钮状态样式（default / hover / active / disabled），用普通 mixin 会强制生成所有状态，哪怕只用其中两个；而 detach ruleset 可按需拼接：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@btn-base: {
  padding: 8px 16px;
  border: none;
  font-weight: 500;
};
@btn-hover: {
  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
};
@btn-active: {
  &:active {
    transform: translateY(0);
  }
};
.primary-btn {
  @btn-base();
  @btn-hover();
  @btn-active();
}
.secondary-btn {
  @btn-base();
  @btn-hover();
  /* 不加 @btn-active，也不生成对应 CSS */
}

每个 ruleset 是独立的、可选的片段，不耦合；mixin 往往隐含“全量应用”语义
编译后 CSS 更精简：没调用的 ruleset 完全不输出
适合构建设计系统中的原子样式层（如 @focus-ring、@sr-only），由上层组件按需组装
注意：ruleset 不能包含 @media 查询本身（会报错），但可以放在 @media 内部调用，比如 @media (max-width: 768px) { @btn-base(); }

容易踩的坑：作用域、嵌套和编译时机

Detach ruleset 最隐蔽的问题来自作用域泄漏和嵌套意外展开：

在 @media 或 @keyframes 内部定义 ruleset，它仍属于全局作用域，可能被外部误调用
ruleset 内部若写 .child { color: red; }，调用时会原样展开；但若写 & .child，则依赖调用处是否有父选择器 —— 没有就编译失败
不能在 @import 的文件里定义 ruleset 后，指望主文件直接调用：Less 默认不提升跨文件 ruleset，需确保 import 顺序，或统一收口到一个 mixins.less 中
调试技巧：临时加 @debug "called"; 到 ruleset 内部，看是否被意外触发（@debug 在 ruleset 里有效）