srcmini通常, 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和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="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值。
输出
评论前必须登录！
注册