通过添加到 SASS 中的类名来嵌套 css 选择器

Posted 2023-03-06

【中文标题】通过添加到 SASS 中的类名来嵌套 css 选择器

【英文标题】：Nested css selectors by adding to class name in SASS

【发布时间】：2017-12-03 08:59:59

【问题描述】：

我正在构建一个 flexbox 网格系统，并希望保持我的 scss 文件易于管理。

类 col-2、col-4、col-6 的元素的选择器有什么问题导致它们无法工作？

.grid-container
max-width:1280;
margin: 0 24px;
display: flex;

    [class^="col"]
        flex:1;
        margin: 0 8px;

        &:first-child
            margin-left:0;
        
        &:last-child
           margin-right:0;
        

        [class*="-2"]
            width:16.5%;
        

        [class*="-4"]
            width:33%;
        

        [class*="-6"]
            width:50%;
        
    

所有列都获取边距样式以及第一个子项和最后一个子项的行为，但没有其他选择器的宽度。这可能是一个 flexbox 问题吗？弹性基础？

【问题讨论】：

试试&[class*="-2"]（注意&）

【参考方案1】：

[class^="col"] 
  [class*="-2"] 
    width: 16.5%;
  
  [class*="-4"] 
    width: 33%;
  
  [class*="-6"] 
    width: 50%;
  

将产生以下选择器：

[class^="col"] [class*="-2"] 
[class^="col"] [class*="-4"] 
[class^="col"] [class*="-6"] 

注意每个属性选择器之间的空格。上面的选择器将首先搜索具有以.col 类开头的类属性的元素。然后他们会找到嵌套在 .col 元素中的元素，该元素的类属性在属性的某处包含 -2、-4 或 -6。

通过添加与符号&，您可以捕获当前选择器路径。下面的 SCSS 和你现在的一样：

[class^="col"] 
  & [class*="-2"] 
    width: 16.5%;
  

编译为（属性选择器之间的空格）：

[class^="col"] [class*="-2"] 

在嵌套选择器之前放置 & 符号（就像您使用 first-child 和 last-child 一样）会产生不同的结果，即您（可能）想要的结果：

[class^="col"] 
  &[class*="-2"] 
    width: 16.5%;
  

编译为（属性选择器之间没有空格）：

[class^="col"][class*="-2"] 

---

恕我直言，您目前拥有的东西是过度设计的。我会建议一些更直接和灵活的东西。使用常规的类选择器。

.col     
  &-2  width: 16.5%; 
  &-4  width: 33%; 
  &-6  width: 50%;     


[class*="col-"] 
  flex: 1;
  margin: 0 8px;

  &:first-child  margin-left: 0; 
  &:last-child  margin-right: 0; 

请参阅下面的堆栈片段以查看上面的编译结果。请注意，我使用*=（星号等号）而不是^=（插入号等号）来实现班级放置的灵活性。如果您想强制列类成为类属性值中的第一个类，由您决定。

https://codepen.io/anon/pen/yXveRq

.row 
  display: flex;


.col-2  width: 16.5%; 
.col-4  width: 33%; 
.col-6  width: 50%; 

[class*="col-"] 
  flex: 1;
  margin: 0 8px;


[class*="col-"]:first-child 
  margin-left: 0;

[class*="col-"]:last-child 
  margin-right: 0;

<div class="row">
  <div class="col-4">Col 1</div>
  <div class="col-4">Col 2</div>
  <div class="col-4">Col 3</div>
</div>

【参考方案2】：

科扬克斯。 快速而肮脏的解决方法是在 .grid-container 的 .col 类上为“flex”设置额外的定义。

Here 是为您解决问题的快速而肮脏的答案！

flex:1 1 auto;

仅供参考。我在提供的链接中也提到了类嵌套方面的一些差异。

【参考方案3】：

这不是“弹性盒”问题。这是一个“CSS”问题。

[class^="col"] 
   [class*="-2"] 
       width:16.5%;
   

将产生这个 CSS：

[class^="col"] [class*="-2"]width:16.5%;

但你可能想要...

[class^="col"][class*="-2"]width:16.5%;

...这将由...产生

[class^="col"] 
   &[class*="-2"] 
       width:16.5%;
   

空格 （在 CSS 中）和与号 &（在 SCSS 中）是不同的。