Question

是否有一种有效的方法来编写sass以获得如下所示的css输出，其中我有一个没有类的原生<p>标记，然后有<p>标记的类？

SASS

article {
    .main {
        p {
            margin: 0 auto;
            width: 54.717%;
        }
        p.pull-graph {
                margin-bottom: 1em;
        }
    }
}

CSS

article.main p.pull-graph {
    margin-bottom: 1em;
}
article.main p {
    margin: 0 auto;
    width: 54.717%;
}

Answer 1

您可以避免使用p reference to the parent selector

为每个班级重复标记名&

article {
    .main {
        p {
            margin: 0 auto;
            width: 54.717%;

            &.pull-graph {
                margin-bottom: 1em;
            }
        }
    }
}

作为旁注，还要考虑尽可能缩短你的css规则（以减少选择器的特异性）

E.g。作为一项小改进，您可以将role="main"设置为文章并使用[role="main"] p （特异性11）而不是article.main p （规范12）< / em>的。

另一个更好的改进可能是使用HTML5 <main>元素代替article.main，而您的选择器变为main p （规范2）

如何有效地编写基本标签和类标签

1 个答案: