SASS |嵌套

SASS Nesting 使我们的工作非常高效，我们不必一次又一次地重复外部选择器。我们可以按照它们在 HTML 文件中出现的顺序编写嵌套选择器(即父-外和子-内选择器表单)。 SASS 会自动做合并的工作。

请参阅下面的示例：
SASS文件：

ul {
    list-style-type: none;

    li {
        display: inline-block;
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 10px 15px; 
            color: blue;
        }
    }
}

编译后的 CSS 文件：

ul {
    list-style-type: none;
}

ul li {
   display: inline-block;
}

ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    color: blue;
}

SASS 还允许嵌套具有不同组合器的选择器。您可以将组合器放在内部选择器的开头或外部选择器的末尾或两者的中间。

请参阅下面的示例：
SASS文件：

ul { 
    + li {
        display: inline-block;
    }
}

li {
    > {
        a {
            text-decoration: none;
        }   
    }
}

p ~ {
    span {
        text-decoration-line: underline;
        text-decoration-style: double;
    }
}

编译后的 CSS 文件：

ul + li {
    display: inline-block;
}
  
li > a {
    text-decoration: none;
}
  
p ~ span {
    text-decoration-line: underline;
    text-decoration-style: double;
}