Sass: Content Block Mixin (Or Placeholder) That Takes Contextual Selectors and Appends Them to Selector in Mixin

SASS: content block mixin (or placeholder) that takes contextual selectors and appends them to selector in mixin

You just need to move the & to be part of the mixin:

@mixin context($size) {
  body.#{$size} & {
    @content
  }
}

div {
  span {
    font-size: 2em;
    @include context('large') {
        font-size: 5em;
    }
  }
}

Output:

div span {
  font-size: 2em;
}

body.large div span {
  font-size: 5em;
}

As of Sass 3.4, you can write this to work both inside a selector and at the root of the document:

@mixin optional-at-root-nest($sel) {
    @at-root #{if(not &, $sel, selector-nest($sel, &))} {
        @content;
    }
}

@mixin context($size) {
    @include optional-at-root-nest('body.#{$size}') {
        @content
    }
}

div {
    span {
        font-size: 2em;
        @include context('large') {
                font-size: 5em;
        }
    }
}

@include context('large') {
    font-size: 2em;
}

SASS: How to declare inline browser-dependent overrides?

You can just just & to do this:

.selector {
  font: 'Arial';
  font-weight: 400;
  .ie7 & {
    font-weight: 500;
  }
}

Just write the .SCSS as .ie7 & and Sass will interpret that as a container:

.selector {
  font: 'Arial';
  font-weight: 400;
}
.ie7 .selector {
  font-weight: 500;
}

Related Topics