相关疑难解决方法(0)

我的菜单中有样式链接的以下SCSS:

nav {
    ul {
        li {
            a {
                color: red
            }
        }
    }

    ul.opened {
        li {
            a {
                color: green
            }
        }
    }
}

哪个生成以下(正确)CSS:

nav ul li a {
  color: red;
}
nav ul.opened li a {
  color: green;
}

我尝试修改我的JavaScript以将类应用于nav元素,并selector-append()在Sass中使用它来附加类.但这似乎以错误的顺序进行追加(如果参数反转,则该类将附加到最后一个元素!):

nav {
    ul {
        li {
            a {
                color: red;

                @at-root #{selector-append('.opened', &)} {
                  color: green;
                }
            }
        }
    }
}

输出(不正确!):

nav ul li a {
  color: red;
}
.openednav ul li a …

我在HTML和SASS中使用属性模块，因为这很合逻辑。目前，我可能会有这样的标记：

<article data-post="wrap feature">
  <h1 data-post="title feature">Feature title</h1>
</article>

<article data-post="wrap">
  <h1 data-post="title">Normal title</h1>
</article>

SASS看起来像这样：

[data-post] {
  font-size: 15px;
  color: black; }

[data-post~="title"] {
  font-size: 20px; }

[data-post~="title"][data-post~="feature"] {
  font-size: 30px; }

工作正常，但我想知道是否可以在SASS中嵌套这些。它们都适用于，[data-post]因此我想在其中定位属性。我在想像这样的东西（显然不起作用）：

[data-post] {
  font-size: 15px;
  color: black;

  &[~="title"] {
    font-size: 20px; }

  &[~="title"]&[~="feature"] {
    font-size: 30px; }
}

这将更合乎逻辑，更干燥，并且更易于编码/维护。