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

Question

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

Answer 1

这不是“flexbox”问题。这是一个“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 中)是区别。