📌  相关文章
📜  SASS嵌套

📅  最后修改于: 2020-12-25 04:12:53             🧑  作者: Mango

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和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


  
  
    Nesting example of sass  
     
  


Available corses on JavaTpoint:


    
  
  • SQL
    • 
  
  • Oracle
    • 
  
  • Java
    
      
      
    • Core Java
      • 
      
    • Advance Java
      • 
    
    
  
    • 
  
  • HTML/CSS
    • 
  
  • Etc.
    •

创建一个名为“ 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值。

输出：