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

Asked

Viewed 670 times

2

Hello, I am building a SASS style structure that changes will depend on a class set in my body. This class dictates which browser the user is using, 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 am 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 wonder if there is some more "readable way to write directly in the element Child this class-based modification Parent, something like that:

.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 I can define this in the SASS and make sure to assemble the rest of the statements for when, in a certain class he finds this?

css css3 sass

3 answers

1


I found the solution to my problem. SASS lets me declare a full expression within the class and after it I define the wildcard character of composite selector (&) 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;
  }
}

0

What you can do is create an EXTEND, you can import one class inside the other.

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

  • in fact I found a way beem more functional, no extend..., see in the post I’m creating

  • 1

    Posted here in this post for us to see =)

  • tai the solution, functional, and simple... so I can do "bugfixe’s" within each element when needed

0

You can use @at-root.

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

  • yes, it’s an idea that I also found, but if I use @at-root it will only serve if it is in the body of the document, the way I put it serves for any element Parent, regardless of the level of the same

Browser other questions tagged css css3 sass

You are not signed in. Login or sign up in order to post.