嵌套在 SASS 中是如何工作的
嵌套在 SASS 中是如何工作的
当您观察 HTML 文件的结构时，您会注意到它具有非常清晰的层次结构：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body> <h1>我的第一个标题</h1>
<p>我的第一段。</p> </body>
</html>
如您所见，HTML 的结构使其相对易于阅读。
另一方面，CSS 缺乏这种视觉结构。这就是为什么它有很快变得杂乱无章的趋势。
进入萨斯 嵌套 ！
定义
使用嵌套，我们可以将子选择器嵌套在父选择器中。
这导致代码更清晰，重复更少。
例子
采用以下 HTML：
<nav class="navbar">
<ul>
<li>家</li>
<li>服务</li>
<li>联系我们</li>
</ul>
</nav>
使用常规 CSS，我们会这样写：
.navbar {
背景颜色：红色；
填充：1rem；
}
.navbar {
列表样式：无；
}
.navbar {
文本对齐：居中；
保证金：1rem；
}
这里有很多重复。每次我们想要设置一个孩子的样式 导航栏 ，我们必须重复类名。
使用 Sass 嵌套，我们可以编写更简洁的代码。
像这样：
.navbar {
背景颜色：红色；
填充：1rem；
ul {
列表样式：无；
}
李{
文本对齐：居中；
保证金：1rem；
}
}
使用缩进，您现在可以看到 ul 和 李 选择器整齐地嵌套在 导航栏 选择器。
我们有一个更少重复的语法，更容易阅读！
结论
如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！
让我们联系
最初发表于 https://dev.to 2022 年 9 月 3 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号