文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

原生 CSS 中类似 Sass 的嵌套

2024-11-30 04:10

关注

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

.parent {
    .child {
        color: red;
    }
}

这将被编译成以下 CSS。

.parent .child {
    color: red;
}

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

原生 CSS 嵌套

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

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

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

很整洁,对吧?

但也有一些注意事项。

局限性

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

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

.parent {
    & span {
        color: red;
    }
}

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

.parent span {
    color: red;
}

这也适用于如下场景。

ul {
  padding-left: 1em;
}

.component ul {
  padding-left: 0;
}

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

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

ul {
  padding-left: 1em;

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

差不多就是这样了!

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

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

图片

Reference

[1]CSS 嵌套模块:https://drafts.csswg.org/css-nesting-1/

[2]bugs.webkit.org:http://bugs.webkit.org/

[3]bugs.chromium.org:https://bugs.chromium.org/p/chromium/issues/list

来源:独立开发者张张内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯