Use the ampersand in SASS to reference specific tags with the parent class?

sass

I have a class semantic which I apply to many different elements. Depending on which html tag the class is applied to, I would like it to apply a different style. This is how I tried to do it:

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

This doesn't work. Of course I could write it like this, but it wouldn't be very "DRY":

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

 .semantic p {
     margin: 0;
 }

Is this possible?

Edit: For clarification, here is an example of what my HTML looks like:

<ul class='semantic'>
    <li>An Item</li>
</ul>

<p class='semantic'>This text is semantically a paragraph, but should not be displayed as such</p>

Best Answer

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.

Related Solutions

Sass combining parent using ampersand (&) with type selectors

As Kumar points out, this has been possible since Sass 3.3.0.rc.1 (Maptastic Maple).

The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors.

We can combine the @at-root directive along with interpolation #{} to arrive at the intended outcome.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

Output CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

Sass ampersand, select immmediate parent

You can work around this today with a mixin like this one:

@mixin if-direct-parent($parent-selector) {
  $current-sequences: &;
  $new-sequences: ();

  @each $sequence in $current-sequences {
    $current-selector: nth($sequence, -1);
    $prepended-selector: join($parent-selector, $current-selector);
    $new-sequence: set-nth($sequence, -1, $prepended-selector);
    $new-sequences: append($new-sequences, $new-sequence, comma);
  }

  @at-root #{$new-sequences} {
    @content;
  }
}

Since the & is essentially a list of lists, you can use list functions (nth, set-nth, join and append) to create the selector sequence you want. Then use @at-root to output the new selector at root-level. Here's how you'd use it:

.grandparent-1,
.grandparent-2 {
  color: red;

  .child {
    color: blue;

    @include if-direct-parent('.parent') {
      color: green;
    }
  }
}

Which will output:

.grandparent-1,
.grandparent-2 {
  color: red;
}
.grandparent-1 .child,
.grandparent-2 .child {
  color: blue;
}
.grandparent-1 .parent .child, .grandparent-2 .parent .child {
  color: green;
}

Best Answer

Related Solutions

Sass combining parent using ampersand (&) with type selectors

Sass ampersand, select immmediate parent

Related Topic