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值。

Sass Mixins

Sass 预处理