Apply style in child element according to parent element in SASS With declaration in child

Question

Apply style in child element according to parent element in SASS With declaration in child

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Hello, I'm building a SASS style structure that changes will depend on a defined class in my body. This class dictates which browser the user is using, for example:

<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 -->

I'm aware that in CSS, if I want to change anything for each element, I should use a selector together like this:

In 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; }

In SASS (by logic)

.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; }
}

I would like to know if there is no more "readable" way to write directly to the Child element this modification based on the Parent class, something like this:

.foo {
  parent(.chrome) { background:red; }
  parent(.firefox) { background:blue; }
  parent(.ie) { background:yellow; }
  parent(.opera) { background:pink; }
  parent(.edge) { background:green; }
}

Is there any way for me to define this in SASS and he himself will be responsible for assembling the rest of the statements for when, in a given class, he will find this?

css css3 sass

asked by anonymous 02.01.2017 / 16:27

3 answers

0

What you can do is create an EXTEND, you can import one class into another.

// 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;
}

02.01.2017 / 17:13

0

You can use @ at-root.

.foo {
  @at-root {
    .chrome & { ... }
    .firefox & { ... }
    .iexplorer & { ... }
  }
}

04.01.2017 / 04:55

Ajax + Codeigniter Host images to an HTML in Google Drive

score 1 · Accepted Answer

I found the solution to my problem. SASS lets me declare a complete expression within the class and after it I set the composite selector wildcard character (&) like this:

.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;
  }
}