Systematically Awesome Style Sheets, or Sass, is an extension to the core CSS language that performs the role of a pre-processor. Its main goal is to enhance CSS with more advanced features and a more sophisticated look. Sass gives developers the ability to use a completely CSS-compatible syntax by permitting the use of variables, nested rules, mixins, inline imports, inheritance, and other capabilities.

Sass positions itself as a very strong and effective extension language for CSS, expertly defining the style of documents in a thorough and organised way. Its fundamental value comes from its capacity to manage large style sheets efficiently, encouraging organisation and quick execution while simultaneously providing seamless handling of smaller style sheets.

Combinator

A construct that clarifies the connection among selectors is called a combinator. A combinator could be used in a CSS environment where a selector has the ability to subsume many basic selectors.

In CSS, there's a total of four distinct combinators:

• Descendant selector (space)

• 子选择器 (>)

• Adjacent sibling selector (+)

• General sibling selector (~)

Just child selectors will be the subject covered in this article.

子选择器

All elements that are directly children of a chosen element are chosen using the child selector. The following example illustrates the selection of all

elements that are children of a

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

Example

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

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

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

Explanation

The nested architecture within a designing language, like CSS, is represented by the code above. A "card" component is declared at the beginning, which comes next by an opening curly bracket. Here is a "outer" component inside the "card" component that is specified by an additional initial curly bracket. There is a "inner" component that has the attribute "color" configured for blue within the "outer" component. Two concluding curly brackets are used to signify the completion of both the "outer" and "card" components, correspondingly, before the code is finished. According to this construction, the "inner" component is encased by the "outer" component, and is itself encased by the "card" component. The "color: blue;" attribute indicates the reason why the "inner" element's content or background color ought to be blue.

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

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

Explanation

An additional instance of the identical structure of layers utilizing an alternate syntax is shown in the source code above. The arrow (">") designating a child component connection follows the statement for the "card" component at the start of the declaration. A second arrow is used to denote the statement of a "outer" component, which is followed by an assertion of a "inner" component that is also accompanied by an arrow. The "inner" component is given the attribute "color: blue;" to indicate the element should have blue as its hue. Using the arrows denoting the ordering among the components, the following code reflects the identical hierarchical connection as the above Code.

Output

The code mentioned earlier translates to the following CSS code:

card > outer > inner {
 color: blue;
}

该代码还可以编译为SASS：

card
   > outer
      > inner
         color: blue

Conclusion

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

以上就是如何在SASS中创建一个组合的子选择器？的详细内容，更多请关注php中文网其它相关文章！

转载链接：https://www.php.cn/faq/610361.html