1/9 - The & selector


#1


The exercise gives me the following example:

the following Sass:

.notecard{ 
  &:hover{
      @include transform (rotatey(-180deg));  
    }
  }

will compile to the following CSS:

.notecard:hover {
  transform: rotatey(-180deg);
}

And it says that "the & character is used to specify exactly where a parent selector should be inserted. It also helps write psuedo classes in a much less repetitive way".

I don't get how the CSS bit can be repetitive, and also I've never seen the @ character (what is it for?) in any of my lessons, can anyone clarify these two things for me?


#2

Consider the following CSS example:

.notecard {
    /* do stuff */
}

.notecard:hover {
    /* do more stuff */
}

.notecard:active {
    /* do more stuff */
}

The Sass version would be:

.notecard {
    /* do stuff */
    &:hover {
        /* do more stuff */
    }
    &:active {
        /* do more stuff */
    }
}

As you can see, when you start piling up pseudo-classes it becomes a bit inefficient to have to type out "notecard" every time (and clutters up the code). The use of nesting means that & in this case is taking the value of the parent selector, which would be the notecard class.

I can't recall exactly where the lessons explain this, but the @ is used for Sass's built-in functions (@mixin, @include, @extend, @function, @import, etc).


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.