Sass 嵌套
无效嵌套
通常，HTML以清晰的嵌套和可视层次结构编写，而CSS则不是。 Sass使您可以按照与HTML相同的视觉层次结构嵌套CSS选择器。嵌套时应格外小心，因为过度嵌套的规则可能会导致复杂性，并且难以维护。
让我们看看一个嵌套示例。
SCSS嵌套语法:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
等效的Sass语法:
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
处理后，将为此创建CSS。您会看到ul，li和一个选择器嵌套在nav选择器中。
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嵌套示例
我们来看一个示例，以了解Sass中嵌套的用法。我们有一个名为" simple.html"的HTML文件，其中包含以下代码:
文件: simple.html
<!DOCTYPE html>
<html>
<head>
<title> Nesting example of sass</title>
<link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
<h3>Available corses on lidihuo:</h3>
<ul>
<li>SQL</li>
<li>Oracle</li>
<li>Java
<ul>
<li>Core Java</li>
<li>Advance Java</li>
</ul>
</li>
<li>HTML/CSS</li>
<li>Etc.</li>
</ul>
</body>
</html>
创建一个名为" simple.scss"的SCSS文件，其代码如下:
文件: simple.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
将两个文件都放在根文件夹中。
现在，打开命令提示符并运行 watch 命令，告诉SASS监视文件并在更改SASS文件时更新CSS。
执行以下代码: sass--watch simple.scss: simple.css
它将自动在同一目录中创建一个名为" simple.css"的普通CSS文件。
例如:
创建的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; }
现在，执行上述html文件，它将读取CSS值。
