前端必知必会-Sass 嵌套规则和属性

文章目录

• Sass 嵌套规则和属性
• • Sass 嵌套规则
  • Sass 嵌套属性
• 总结

Sass 嵌套规则和属性

Sass 嵌套规则

Sass 允许您以与 HTML 相同的方式嵌套 CSS 选择器。

查看网站导航的一些 Sass 代码示例：

示例
SCSS 语法：

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	li {
		display: inline-block;
	}
	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

请注意，在 Sass 中，ul、li 和 a 选择器嵌套在 nav 选择器内。

而在 CSS 中，规则是逐一定义的（不是嵌套的）：

CSS 语法：

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	display: inline-block;
}
nav a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
}

因为您可以在 Sass 中嵌套属性，所以它比标准 CSS 更简洁、更易读。

Sass 嵌套属性

许多 CSS 属性具有相同的前缀，例如 font-family、font-size 和 font-weight 或 text-align、text-transform 和 text-overflow。

使用 Sass，您可以将它们写为嵌套属性：

示例
SCSS 语法：

font：{
family：Helvetica，sans-serif；
size：18px；
weight：bold；
}

text：{
align：center；
transform：lowercase；
overflow：hidden；
}

Sass 转译器会将上述内容转换为普通 CSS：

CSS 输出：

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

总结

本文介绍了Sass 嵌套规则和属性的使用，如有问题欢迎私信和评论