Olá, estou construindo uma estrutura de estilos SASS que mudanças irão depender de uma classe definida no meu body. Essa classe dita qual o navegador que o usuário está usando, exemplo:
<body class="chrome"> <!-- Google Chrome -->
<body class="firefox"> <!-- Mozilla Firefox -->
<body class="ie"> <!-- Internet Explorer -->
<body class="opera"> <!-- Opera Browser -->
<body class="edge"> <!-- Edge Browser -->
Eu tenho conhecimento que, em CSS, se eu quiser alterar qualquer coisa para cada elemento, eu devo usar um seletor em conjunto assim:
Em CSS
.chrome .foo { background-color:red; }
.firefox .foo { background-color:blue; }
.ie .foo { background-color:yellow; }
.opera .foo { background-color:pink; }
.edge .foo { background-color:green; }
Em SASS (pela lógica)
.chrome {
.foo { background-color:red; }
}
.firefox {
.foo { background-color:blue; }
}
.ie {
.foo { background-color:yellow; }
}
.opera {
.foo { background-color:pink; }
}
.edge {
.foo { background-color:green; }
}
Gostaria de saber se não existe alguma forma mais "legível para escrever diretamente no elemento Child essa modificação baseada na classe Parent, algo assim:
.foo {
parent(.chrome) { background:red; }
parent(.firefox) { background:blue; }
parent(.ie) { background:yellow; }
parent(.opera) { background:pink; }
parent(.edge) { background:green; }
}
Existe alguma forma de eu definir isso no SASS e ele mesmo se encarregar de montar o resto das declarações para quando, em determinada classe ele encontrar isso?