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

输出: