📜  SASS |风格规则

📅  最后修改于: 2021-08-31 08:12:30             🧑  作者: Mango

就像 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 仅在插值完全解决后才分析选择器,这意味着您可以安全地使用插值来生成选择器的任何部分,而不必担心它不会工作。