在Sass和CSS模塊中使用全局父選擇器

如何使用Sass和CSS模塊基於GLOBAL父選擇器（在本例中爲isOpen）的存在來設置我的React組件的樣式？在Sass和CSS模塊中使用全局父選擇器

渲染HTML：

<div class="isOpen"> 
    <div class="MyContainer__MyStyle___u9dTa"> 
     My react component 
    </div> 
</div>

我的薩斯文件：

.MyStyle 
    margin-left: 100px 
    color: black 

// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like: 
.MyStyle 
    :global(.isOpen) & 
     margin-left: 0 
     color: red

上面的代碼給出錯誤：房產「全局」後面必須跟一個 '：'

來源

2016-10-26 per_jansson

您的代碼不會給我錯誤，但輸出很奇怪。我不明白你的問題，你想要這樣的事情？ http://www.sassmeister.com/gist/e221cca9fdf3ff44c355f128ddc49f3b – blonfu

它看起來像這裏有幾個問題。

「MyContainer__MyStyle___u9dTa」是一個大類名。您不能通過使用句點語法來引用一個零件。但你可以參考這樣的部分類。

*[class=*"MyStyle"]{}

它也看起來像你使用LESS語法，而不是sass。這裏是我將如何寫與sass和部分類參考代碼

*[class=*"MyStyle"]{ 
    margin-left: 100px; 
    color: black; 
} 
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like: 
.isOpen{ 
    *[class=*"MyStyle"]{ 
     margin-left: 0 
     color: red 
    } 
}

祝你好運。值得注意的是，如果你更容易在sass文件中使用vanilla CSS。這裏有一些資源，CSS和SASS

http://www.w3schools.com/css/css_syntax.asp

http://sass-lang.com/documentation/

來源

2016-10-26 21:19:12