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

【问题标题】：Nested css selectors by adding to class name in SASS通过添加到 SASS 中的类名来嵌套 css 选择器
【发布时间】：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"]（注意&）

标签： html css sass css-selectors flexbox

【解决方案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 中）是不同的。

【讨论】：