新知|原生 CSS 中类似 Sass 的嵌套

如果你和我一样觉得 Sass 的 CSS 嵌套功能非常有用,那么你一定会很高兴地知道,我们的好日子就要来了。

因此,如果你不知道,Sass 的 CSS 嵌套功能允许您将 CSS 选择器嵌套在其他选择器中。例如,你可以这样写:

css 复制代码
.parent {
    .child {
        color: red;
    }
}

这将被编译成以下 CSS。

css 复制代码
.parent .child {
    color: red;
}

当你想为某一特定元素编写 CSS 时,如果该元素是另一元素的子元素,这就非常有用了。你不必反复编写父选择器。只需将子选择器嵌套在父选择器中就可以了。

原生 CSS 嵌套

现在,原生 CSS 也出现了类似的功能。 CSS 嵌套模块现已在 Safari 技术预览版 162 和 Chrome Dev 中附带(通过在浏览器中启用"Experimental Web Platform features(实验性 Web 平台功能)"标志)。

启用后,你可以像这样在原生 CSS 中编写上述类似 Sass 的代码。

css 复制代码
.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

很整洁,对吧?

但也有一些注意事项。

局限性

要使用 CSS 嵌套,你必须嵌套仅以以下符号开头的选择器:.:[>+~#*。这是因为浏览器解析 CSS 的方式。如果你嵌套的选择器不以上述任何符号(例如 pspan、`div`` 等)开头,则嵌套将被忽略。

为了解决这个问题,你可以在子选择器前面添加 & ,如下所示。

css 复制代码
.parent {
    & span {
        color: red;
    }
}

上面的代码将被编译成下面的CSS。

css 复制代码
.parent span {
    color: red;
}

这也适用于如下场景。

css 复制代码
ul {
  padding-left: 1em;
}

.component ul {
  padding-left: 0;
}

可以看出,这里的 ul 选择器并没有嵌套在 .component 选择器中。

要使 ul 选择器嵌套在 .component 选择器内,您可以将 & 附加到 .component 选择器,如下所示。

css 复制代码
ul {
  padding-left: 1em;

  .component & {
    padding-left: 0;
  } 
}

差不多就是这样了!

由于 CSS Nesting Module 仍处于草案阶段,因此不建议在生产中使用它。但很高兴知道,一旦该功能足够成熟,它就会出现在原生 CSS 中。

在此之前,您可以在支持的浏览器之一中对其进行测试,并在 bugs.webkit.orgbugs.chromium.org 上提交你的反馈或问题。

相关推荐
app出海创收老李1 分钟前
海外独立创收日记(4)-第一笔汇款
前端·后端·程序员
Takklin1 分钟前
React JSX 转换原理与 GSR 实现解析
前端·react.js
苏打水com19 分钟前
字节跳动前端业务:从「短视频交互」到「全球化适配」的技术挑战
前端·音视频
又是忙碌的一天28 分钟前
前端学习 JavaScript
前端·javascript·学习
Jagger_1 小时前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒1 小时前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端
Hilaku1 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞2 小时前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子2 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋2 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js