CODEWITHSUNDEEP
sass
futuraprime
futuraprime

Reputation: 5588

Using SASS to extend selectors with elements

I'm working on an SCSS stylesheet, and I have a rule that looks something like this:

.footer-link-row {
    color: red;
    ul& {
        padding: 0;
    }
}

I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?

--Added--
To clarify, the eventual CSS I want out of this is:

.footer-link-row {
    color: red;
}
ul.footer-link-row {
    padding: 0;
}

Upvotes: 0

Views: 376

Answers (1)

Chris Esplin
Chris Esplin

Reputation: 892

You want something like the following:

ul {
  padding: 0;
  .footer-link-row {
    color: red;
  }
}

The ampersand is used to require that both selectors match

a { text-decoration: none;
  &:hover { border-width: 1px }
}
// compiles to 
a {
  text-decoration: none;
}
a:hover {
  border-width: 1px;
}

If you want the ul.footer-link-row try 

ul {
  &.footer-link-row {
    padding: 0;
  }
  .footer-link-row {
    color: red;
  }
}

Your clarification indicates that you need two scopes.

ul {
  &.footer-link-row {
    padding: 0;
  }
}

.footer-link-row {
  color: red;
}

Upvotes: 1

Related Questions