Sass嵌套用法详解 _嵌套

通常, HTML以清晰的嵌套和可视层次结构编写, 而CSS则不是。 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语法：

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和a选择器嵌套在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="http://www.srcmini.com/simple.css"/> < /head> < body> < h3> Available corses on srcmini:< /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文件” simple.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值。
输出