Can I use the ampersand in SASS to reference specific tags with the parent class? [duplicate]

Answer 1

What you're wanting for would in theory look like this:

.semantic {
    ul& {
        padding: 0;
        margin: 0;
    }
    p& {
        margin: 0;
    }
}

This is not possible because the & must be first. You're just going to have to deal with the fact that it isn't DRY and write it out by hand:

ul.semantic {
    padding: 0;
    margin: 0;
}

p.semantic {
    margin: 0;
}

As of Sass 3.3 or 3.4, it is possible using this syntax:

.semantic {
    ul#{&} {
        padding: 0;
        margin: 0;
    }
    p#{&} {
        margin: 0;
    }
}

Answer 2

On Sass 3.4:

.semantic {
    @at-root {
      ul#{&} {
        padding: 0;
        margin: 0;
      }
      p#{&} {
        margin: 0;
      }
    }
}

Generates:

ul.semantic {
  padding: 0;
  margin: 0;
}

p.semantic {
  margin: 0;
}

@at-root moves the block to the top-level. This has several uses (see link) but here it's being used to keep take advantage of the & syntax without implying that the rules are child selectors of .semantic.

Answer 3

Because of how CSS specificity works you could just do this:

.semantic {
  margin: 0; 
}

ul.semantic {
  padding: 0;
}

In your HTML, p.semantic and ul.semantic would have margin: 0; and only ul.semantic would have padding: 0;

Less Sass, less CSS. DRY.

If, unlike your example, elements on the real site have even less in common, you might want to rethink why they need to have the same class name.

Answer 4

It's not quite clear what HTML structure you have.

If it's like this:

<div class="semantic">
  <p>...</p>
  <ul>...</ul>
</div>

...then you need classes like .semantic ul and .semantic p. Here's an appropriate SCSS:

.semantic {

    & ul {
        padding: 0;
        margin:  0; }

    & p {
        margin:  0; } }

If HTML structure is like this:

<p class="semantic">...</p>
<ul class="semantic">...</ul>

...then you need classes like .semantic ul and .semantic p. You should listen to bookcasey. Here's a sassy version of his DRY suggestion:

.semantic {
  padding: 0;
  margin:  0; }

p.semantic {
  margin:  0; }