CSS如何利用Sass的@content占位符_定义可传入样式的mixin-css教程-PHP中文网

@content 是 Sass 中用于插入样式块的编译期宏，非变量或字符串，必须配合 @include 大括号语法使用，支持作用域继承但不支持运行时逻辑、多实例或跨文件传递。

css如何利用sass的@content占位符_定义可传入样式的mixin

它不是变量，也不是字符串拼接工具，而是一个“样式块插入点”。Sass 编译时会把调用处的嵌套样式原封不动地塞进 @content 的位置——这决定了你没法用 $style 变量去存一段 CSS 再传进去，那样只会被当作文本字面量处理，不编译、不作用域继承、不支持嵌套。

常见错误现象：@mixin card($styles) { border: 1px solid #ccc; #card { $styles; } } —— 这会报错，因为 $styles 是值，不是可展开的样式块。

@content 必须配合 @include 的大括号语法使用，例如 @include card { color: red; p { font-weight: bold; } }
它自动继承调用处的作用域：父选择器、变量、函数都可用
不支持多个 @content；一个 mixin 里只能有一个（Sass 旧版本甚至不允许嵌套调用带 @content 的 mixin）

核心就三步：声明 mixin、放 @content、调用时用大括号包裹样式块。没有额外配置项，也不需要参数来“接收样式”。

@mixin responsive-container {
  width: 100%;
  @media (min-width: 768px) {
    width: 750px;
    margin: 0 auto;
  }
  @content;
}

使用时：

.header {
  @include responsive-container {
    background: #222;
    color: white;
    text-align: center;
  }
}

编译后，@content 部分会插在媒体查询内部，且自动带上 .header 前缀。

CSS工具箱(专业版)

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

下载

注意缩进：Sass 对空格敏感，@content 前后的缩进要和上下文一致，否则可能生成意外嵌套
如果想让 @content 插入到特定选择器下（比如只作用于子元素），就在 mixin 里写好结构，再把 @content 放进去，而不是指望调用方“自己控制”

参数和 @content 完全不冲突，参数用来控制逻辑分支或值，@content 负责注入样式结构。这是最常用的混合模式。

@mixin theme-card($bg: #fff, $border: #ddd) {
  background: $bg;
  border: 1px solid $border;
  padding: 1rem;
  @content;
}

调用时依然用大括号：

.card--featured {
  @include theme-card(#f0f8ff, #4a90e2) {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    h2 { color: #4a90e2; }
  }
}

它只在编译期静态展开，无法做运行时判断，也不能跨文件传递——如果你在 _mixins.scss 里定义了带 @content 的 mixin，就不能把它“导出成变量”供 JS 或其他语言调用。

不能在 @for / @each 循环里直接用 @content（会报错），必须把循环逻辑写在 mixin 内部，再把 @content 放在循环体里或外侧
如果调用时忘了加大括号，比如写成 @include card;，Sass 不报错，但 @content 部分直接消失，样式丢失且无提示
调试困难：Chrome DevTools 里看不到 @content 的来源行号，它会被合并进调用处的 CSS 行中，所以别指望靠 sourcemap 精确定位“哪段 @content 出了问题”