个性化阅读
专注于IT技术分析

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

<!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文件。

例如:

Sass嵌套1

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

输出

Sass嵌套2
赞(0) 打赏
未经允许不得转载:srcmini » Sass嵌套用法详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏