& symbol

[bikejunkie]

Hello there.
I found this cool bit on codepen – http://codepen.io/geoffgraham/pen/JAfCK

On line 125, there’s a snippet that looks like
&:hover

Can anyone tell me what the ‘&’ means here?

[Senff]

It’s not pure CSS, is SCSS (used by Sass and LESS) that is compiled to actual CSS. It basically means “this”. Here’s some examples:

a {
   color:#ff0000;
   &:hover {
      color:#0000ff;
   }
}

Will be compiled into:

a {
   color:#ff0000;
}

a:hover {
   color:#0000ff;
}

Example 2:

li {
    border:solid 1px #0000ff;
    &.active {
        background:#00ff00;
    }
}

Compiles into:

li {
    border:solid 1px #0000ff;
}

li.active {
    background:#00ff00;
}

And so on.

[bikejunkie]

thanks a lot Senff.
This looks really useful. Hopefully someone will put this into a website so folks can learn (it’s here now at least).

[Wayde Shepard]

You can learn about SASS on there site documentation.

[Author]

Posts