Sass 嵌套

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文件。
例如:

Sass 嵌套_https://bianchenghao6.com_【SASS 教程】_第1张

创建的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值。