SASS |风格规则

就像 CSS 一样，样式规则也是 SASS 的基础。它的使用类似于 CSS。使用选择器选择要设置样式的元素，然后声明它的属性，这会进一步影响这些元素的外观。

例子：
萨斯代码：

.header
  padding: 3px 10px
  font-size: 40px
  font-family: sans-serif
  border: 2px solid green

这将导致以下 CSS 输出：

.header{
  padding: 3px 10px;
  font-size: 40px;
  font-family: sans-serif;
  border: 2px solid green;
}

但是，优势，因为它只是在重复自己。 SASS 希望让您的代码变得简单，而不仅仅是重复。因此，在 SASS 中，您可以避免一次又一次地重复相同的选择器。您可以轻松地在另一个中编写一个样式规则。 SASS 自动完成您想要的工作。 SASS 的这个特性被称为嵌套。

示例： Sass 代码

navbar
  ul
    padding: 2px
    list-style: square
  
  li
    display: inline-block
  
  a
    display: block
    padding: 4px 10px
    font-family: sans-serif

这将导致以下 CSS 输出：

navbar ul{
    padding: 2px;
    list-style: square;
}
navbar li{
    display: inline-block;
}
navbar a{
    display: block;
    padding: 4px 10px;
    font-family: sans-serif;
}

嵌套规则非常有用，但有时它们会创建大量 CSS。嵌套越多，生成 CSS 所需的带宽就越多，浏览器渲染它所需的工作也就越多。因此选择器必须保持浅。

一些更有用的例子：嵌套规则对于处理选择器列表非常有用。选择器列表是指用逗号分隔的选择器列表。这些编译为以下示例：

SASS代码：

.abc, .def
  ul, p
    padding: 2px
    font-family: sans-serif
    border: 1px

这将导致以下 CSS 输出：

.abc ul, .abc p, .def ul, .def p {
    padding: 2px;
    font-family: sans-serif;
    border: 1px
}

插值：为了将变量和函数等值插入选择器，您可以使用插值。插值在创建 mixin 时非常有用，因为它允许您根据用户提供的参数生成选择器。

示例： Sass 代码

@mixin full-form($name, $glyph) 
    span.full-form-#{$name} 
    font-family: sans-serif
    padding: 4px
    border: 10px
    content: $glyph
@include full-form("GFG", "GeeksForGeeks")

这将导致以下 CSS 输出：

span.full-form-GFG {
  font-family: sans-serif;
  padding: 4px;
  border: 10px;
  content: "GeeksForGeeks";
}

Sass 仅在插值完全解决后才分析选择器，这意味着您可以安全地使用插值来生成选择器的任何部分，而不必担心它不会工作。