如何在SASS中创建合并的子选择器

Systematically Awesome Style Sheets（Sass）是核心CSS语言的扩展，起着预处理器的作用。它的主要目标是通过增加更高级的功能和更复杂的外观来增强CSS。Sass使开发人员能够使用完全与CSS兼容的语法，允许使用变量，嵌套规则，混入，内联导入，继承和其他能力。

Sass将自己定位为CSS的非常强大和有效的扩展语言，以一种全面和有组织的方式精确定义文档的样式。它的基本价值在于其有效地管理大型样式表的能力，鼓励组织和快速执行，同时无缝处理较小的样式表。

组合器

用于澄清选择器之间关系的构造称为组合器。在CSS环境中，组合器可以在一个选择器中包含多个基本选择器。

CSS中共有四种不同的组合器：

后代选择器（空格）
子选择器（>）
相邻兄弟选择器（+）
一般兄弟选择器（~）

本文仅涵盖子选择器。

子选择器

使用子选择器选择直接是指定元素子元素的所有元素。以下示例说明了选择所有

作为 div的子元素的元素的方法。

div > p {
   background-color: blue;
}
-color: blue;
}

示例

让我们立即开始探索如何在SASS中创建一个组合子选择器。在SASS中，可以找到几种构建组合子选择器的方法。请注意下面给出的示例。

没有组合子选择器，可能会使用以下类似的技术：

card {
  1 outer {
      inner {
         color: blue;
      }
   }    
}

说明

上述代码表示了设计语言（如CSS）中的嵌套架构。开始时声明一个名为“card”的组件，后跟一个左花括号。在“card”组件内部有一个名为“outer”的组件，由额外的左花括号指定。在“outer”组件内部有一个名为“inner”的组件，该组件具有属性“color”，配置为蓝色。在代码完成之前，使用两个右花括号分别表示“outer”和“card”组件的结束。根据这种结构，“inner”组件被“outer”组件包围，而“outer”组件本身被“card”组件包围。属性“color: blue;”指示“inner”元素的内容或背景颜色应为蓝色的原因。

通过使用>（子选择器），可以生成类似的语法，方法如下：

card {
   > outer {
      > inner {
        color: blue;
     }
   }
}

解释

上面的源代码展示了使用另一种语法的相同层级结构的额外实例。箭头（”>”）在声明开始时指示子组件连接的语句后面。第二个箭头用于表示”outer”组件的语句，后面是对”inner”组件的断言，该断言也带有一个箭头。给”inner”组件赋予属性”color: blue;”以指示元素应该具有蓝色作为其色调。使用箭头表示组件之间的顺序，以下代码反映了与上面代码相同的层级连接。

输出

前面提到的代码转换为以下CSS代码：

card > outer > inner {
 color: blue;
}

代码也可以编译成SASS格式：

card
   > outer
      > inner
         color: blue

结论

最终，这两个代码都描述了一个相互连接的架构，其中“card”组件包含在“outer”组件内部，它本身包含在一个具有blue颜色属性配置的“inner”组件内部。代码显示了不同的语法，包括Code 1使用花括号，Code 2使用箭头表示项目的顺序。然而，组件之间的基本组织和连接仍然保持不变。所描述的代码可能来自类似于CSS的样式语言，它们描述了定义分层框架中“inner”组件的色调。