嵌套的 CSS 类 | saas类选择器答案

【问题标题】：Nested css classes | saas class selectors嵌套的 CSS 类 | saas类选择器
【发布时间】：2023-02-02 14:30:18
【问题描述】：

谁能解释一下这里到底发生了什么？

.st-flex-box {
  display: flex;
  &.f-dr { flex-direction: row; }
  &.f-c { justify-content: center; align-items: center; }

  & > .f-ss { align-self: flex-start; }
  & > .f-sc { align-self: center; }

编辑：弄清楚后，发布我自己的答案。你可以检查一下。

【问题讨论】：

它将输出.st-flex-box.f-dr { flex-direction: row; } 等...简而言之，它将& 处的两个选择器组合在一起并将它们作为单独的规则输出，避免您必须重复它们的共同点：.st-flex-box。

标签： css sass css-selectors scss-mixins

【解决方案1】：

它是 sass 嵌套在 .scss 文件中。

“Sass 允许您以与 HTML 相同的方式嵌套 CSS 选择器。”

参考： https://www.w3schools.com/sass/sass_nesting.php

“>”也是一个组合符，用于选择作为指定标记的直接子元素的元素。参考：https://www.geeksforgeeks.org/css-combinators/

【讨论】：