SCSS要素の特定のインスタンスを参照する

Question

非常に Scss/Sassの新機能mod.scssファイルのどこかで、私が頻繁に再利用するUl > liのスタイルをコーディングしました。しかし、別のmod.scssファイルでは、特定のインスタンスに対してこのコードを変更する必要があります。

「UL/LIタグが.content-sectionクラスの下で表示される場合、動作X、Y、Zを受け取ります」というif-like文を基本的に作成できますか？

.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の中にという子のタグを選択する場合は、単にタグを入れ子にしてください。

参考：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; 
    } 
}