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

我正在构建一个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的问题吗？弹性基础

这不是“flexbox”问题。这是一个“CSS”问题

[class^=“col”]{
[类别*=“-2”]{
宽度：16.5%；
}
}

将导致以下CSS：

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

但是你可能想要

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

。。。它将由…制作

[class^=“col”]{
&[类别*=“-2”]{
宽度：16.5%；
}
}

空格

（在CSS中）和符号

&

（在SCSS中）是不同之处。

这不是“flexbox”问题。这是一个“CSS”问题

[class^=“col”]{
[类别*=“-2”]{
宽度：16.5%；
}
}

将导致以下CSS：

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

但是你可能想要

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

。。。它将由…制作

[class^=“col”]{
&[类别*=“-2”]{
宽度：16.5%；
}
}

空格

（在CSS中）和符号

&

（在SCSS中）是区别。

CoJanks。 快速的解决方法是在.grid容器中的.col类上为“flex”设置额外的定义

这是一个快速而肮脏的答案，可以帮你解决问题

flex:1自动

仅供参考。我在提供的链接中也提到了类嵌套中的一些差异。
CoJanks。
[class^="col"] {
  [class*="-2"] {
    width: 16.5%;
  }
  [class*="-4"] {
    width: 33%;
  }
  [class*="-6"] {
    width: 50%;
  }
}

快速的解决方法是在.grid容器中的.col类上为“flex”设置额外的定义

这是一个快速而肮脏的答案，可以帮你解决问题

flex: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"] {}

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

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

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

通过添加符号和
&
，可以捕获当前选择器路径。以下SCS与您现在拥有的相同：

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

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

将“与”符号放在嵌套选择器的正前方（就像您对
第一个子项
和
最后一个子项
所做的那样）会产生不同的结果，即您（可能）想要的结果：

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


我想你目前拥有的是过度设计的。我建议做一些更直接、更灵活的事情。使用常规的类选择器

.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; }
}

请参阅下面的堆栈代码段，以了解上面的代码编译为什么。注意，我使用了
*=
（星号等于）而不是
^=
（插入符号等于）来提高课堂布置的灵活性。如果要强制列类成为类属性值中的第一个类，则由您决定



.row{
显示器：flex；
}
.col-2{宽度：16.5%；}
.col-4{宽度：33%；}
.col-6{宽度：50%；}
[类别*=“列-”]{
弹性：1；
边际：0.8px；
}
[class*=“col-”]：第一个孩子{
左边距：0；
}
[类*=“列-”]：最后一个子项{
右边距：0；
}

第1列
第2列
第3列

将生成以下选择器：

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

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

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

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

通过添加符号和
&
，可以捕获当前选择器路径。以下SCS与您现在拥有的相同：

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

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

将“与”符号放在嵌套选择器的正前方（就像您对
第一个子项
和
最后一个子项
所做的那样）会产生不同的结果，即您（可能）想要的结果：

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


我想你目前拥有的是过度设计的。我建议做一些更直接、更灵活的事情。使用常规的类选择器

.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; }
}

请参阅下面的堆栈代码段，以了解上面的代码编译为什么。注意，我使用了
*=
（星号等于）而不是
^=
（插入符号等于）来提高课堂布置的灵活性。如果要强制列类成为类属性值中的第一个类，则由您决定



.row{
显示器：flex；
}
.col-2{宽度：16.5%；}
.col-4{宽度：33%；}
.col-6{宽度：50%；}
[类别*=“列-”]{
弹性：1；
边际：0.8px；
}
[class*=“col-”]：第一个孩子{
左边距：0；
}
[类*=“列-”]：最后一个子项{
右边距：0；
}

第1列
第2列
第3列
尝试
和[class*=“-2”]
（注意
和
）尝试
和[class*=“-2”]
（注意
和
）