CODEWITHSUNDEEP
sass
Kirk Ross
Kirk Ross

Reputation: 7153

SCSS is "&" necessary for targeting nested children?

I'm trying to get a handle on what the & sign does when using it BEFORE a nested element. I using it after targets the parent, but before it seems unnecessary.

This...

ul {
  list - style: none;
  text - align: left; 
  & li {
    margin - bottom: 17 px;
  }
}

Seems to compile to the same as this...

ul {
  list - style: none;
  text - align: left;
  li {
    margin - bottom: 17 px;
  }
}

Upvotes: 0

Views: 543

Answers (4)

Kashyap
Kashyap

Reputation: 4796

No, you don't have to always. It depends on the context. The & symbol refers to the current element scope, and is generally used for adding pseudo selectors like :hover, focus etc:

a {
  text-decoration: none;

  &:hover {
    font-weight: bold;
  }
}

Compiles to:

a {
  text-decoration: none;
}
a:hover {
  font-weight: bold;
}

Whereas omitting the & before the : will result in a wrong selector:

a {
  text-decoration: none;

  :hover {
    font-weight: bold;
  }
}

Compiles down to:

a {
  text-decoration: none;
}

a :hover {
  font-weight: bold;
}

Which doesn't work as intended. You can try out different variations at http://www.sassmeister.com/ without any setup.

Upvotes: 2

Johannes
Johannes

Reputation: 67778

actually the & sign is a placeholder for the element one level higher in the CSS, so I think your two examples should not be exactly the same. But since both address all li elements inside a ul (also one or two levels down), both will have the same effect on any submenu lis

Upvotes: 0

xaggre
xaggre

Reputation: 128

The &-operator in sass is not meant to do what you suppose it to do - it is just for your convenience that is does not just explode.

You can use to combine multiple attributes (classes, id etc.) to reduce the loc like this:

.a {
    color: white;
    &.b {
        font-size: 1.5rem;
    }
}

becomes this when compiled:

.a {
    color: white;
}
.a.b {
    font-size: 1.5rem;
}

Read more in this article: https://css-tricks.com/the-sass-ampersand/

Upvotes: 0

Alex
Alex

Reputation: 1

I think in your case it should be the same. & is usually used for creating complex class names, when using class naming methodology such as BEM. For example to get class "ul_styled", you can use

ul {
  somestyle...
  &_styled {
    somestyle...
  }
}

Upvotes: 0

Related Questions