SCSS 引用元素的特定实例

Question

非常对 Scss/Sass 很陌生，在我的 mod.scss 文件中的其他地方，已经编写了我经常重复使用的 Ul > li 样式。但是，在另一个 mod.scss 文件中，我需要为单个特定实例更改此代码。

是否可以从本质上创建一个类似 if 的语句：“如果 UL/LI 标记出现在 .content-section 类下，则采取行为 X、Y 和 z”？

.content-section
{
    margin: 40px 0px;

    & .siteTitleText 
    {
        margin-bottom: 50px;
    }

    & .headers
    {
        margin-bottom: 30px;
    }

    img
    {
        margin: 30px 0px;
    }

    *ul*

}

HTML：

<div class="content-section vendors">
    <p class="headers">Modules, partials, and vendor</p>
    <p class="bodyText">As you can see this divides my project into three basic types of files. Modules, partials, and vendored stylesheets.</p>
    <ul>
        <li class="bodyText">The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.</li>

        <li class="bodyText">The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).</li>

        <li class="bodyText"></li>
    </ul> 
</div>

Answer 1

在您的代码中使用+ 来选择结束标记下方的下一个匹配项。 如果您希望在 .content-section 中选择 child 标签，只需嵌套标签即可。

参考：w3 documentation

.content-section {
    margin: 40px 0px;

    & .siteTitleText {
        margin-bottom: 50px;
    }

    & .headers {
        margin-bottom: 30px;
    }

    img {
        margin: 30px 0px;
    }

    ul, li { // If .content-section has a child named ul or li, do this:
        margin: 100px;
    }
}