2

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?

3 Respostas 3

1

Encontrei a solução para meu problema. O SASS me deixa declarar uma expressão completa dentro da classe e após ela eu definir o caracter coringa de seletor composto (&) assim:

.foo {
  background-color: black;
  body.chrome & {
    background-color: red; 
  }
  body.firefox & {
    background-color: blue; 
  }
  body.ie & {
    background-color: yellow;
  }
  body.opera & {
    background-color: pink;
  }
  body.edge & {
    background-color: green;
  }
}
0

O que você pode fazer é criar um EXTEND, você consegue importar uma classe dentro da outra.

// Criamos os extends

%chrome {
    background:red;
}

%firefox{
    background:blue;
}


// Importamos onde queremos inserir

.box-meio {
  // importar a classe chrome
  @extend %chrome;
}

.box-topo {
  // importar a classe firefox
  @extend %firefox;
}
3
  • na verdade eu achei uma forma beem mais funcional, sem extend..., veja no post que to criando Commented 2/01/2017 às 16:17
  • 1
    Posta aqui nesse post pra gente ver =) Commented 2/01/2017 às 16:19
  • tai a solução, funcional, e simples... assim eu posso fazer "bugfixe's" dentro de cada elemento quando necessário Commented 2/01/2017 às 16:24
0

Você pode utilizar o @at-root.

.foo {
  @at-root {
    .chrome & { ... }
    .firefox & { ... }
    .iexplorer & { ... }
  }
}
1
  • sim, é uma idéia que também achei, mas se eu usar o @at-root só vai servidr se for no body do documento, da maneira que eu coloquei serve para qualquer elemento parent, independente do nível do mesmo Commented 4/01/2017 às 19:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .