CODEWITHSUNDEEP
sass
user1941537
user1941537

Reputation: 6685

SCSS - Adding & between a class and the {

I understand this:

.items {
    @media $desktop {
      color: red;
    }
  }

But what does this mean? Can some one please explains what the & after .items--open means?

.items--open & {
   @media $desktop {
     color: red;
   }

Upvotes: 2

Views: 690

Answers (2)

Alberto Perez
Alberto Perez

Reputation: 2922

I think this article could explain to you everything you need to know about the & of SASS.

Simple explanation (from the article):

We can think of the & as a mechanism that allows us to place the parent selector wherever we need it in our child selector. It allows us to nest with alterations. Let's look at some more examples.

Basically is a utility that allows you to better control the placement of parent selectors in SCSS classes.

Upvotes: 1

Sameer
Sameer

Reputation: 5188

The correct syntax/use of ampersand(&) is to place the parent selector with child
For example (if you need below css)

.items--open.some-class{
 color: red;
}

.items--open.some-2-class{
 color: white;
}
..so on so forth

you have to use below code

.items--open {
 &.some-class{
     color: red;
 }
 &.some-2-class{
     color: white;
 }
}

There are plenty of mistakes in your code.

Wrong

.items {
 @media $desktop {
  color: red;
 }
}
.items--open & {
   @media $desktop {
     color: red;
   }

Right 

.items {
    @media #{$desktop} { //wrap variable in ${}
        color: red;
    }
}

.items--open {
    &.item { //You can't use @media with (&) here, it should be selector
        color: red;
    }
}

.item--open {
    &@media (min-width: 1200px) { // you can't do this
        color: red;
    }
}

.item--open {
    @media (min-width: 1200px) { // you can do this
        color: red;
    }
}

Upvotes: 0

Related Questions