SASS & @content


Every mixin needs a little @content



http://slid.es/illepic/sass-at-content

Christopher Bloom (illepic)

Mixins vs Extends



If it has arguments, use a mixin.

Otherwise, extend that bad boy.


@extend refresher


// an extendable class
.extendable-style {
  font-weight: bold;
  line-height: 1.7;
}

// apply
.thingy-1{ @extend .extendable-style; }
.child .of .something{ @extend .extendable-style; }

// output
.extendable-style,
.thingy-1,
.child .of .something{
  font-weight: bold;
  line-height: 1.7;
}

@mixin refresher


// mixin definition
@mixin mixin-demo($bgcolor, $textcolor){
  background: $bgcolor;
  text-color: $textcolor;
}

// application
.thingy-1{
  @include mixin-demo(blue, green);
}

// output
.thingy-1 {
  background: blue;
  text-color: green;
}

@content makes mixins badass


  1. Pass a block of styles to a mixin (beyond args). 
  2. Placement within the styles included by the mixin.
  3. The styles will appear at the location of any @content directives found within the mixin. 
  4. Define abstractions relating to the construction of selectors and directives. (we'll come back to this)

SASS Reference

@content example


// define mixin
@mixin content-example($color) {
  background: $color;
  @content;
}
// pass extra stuff to it
.my-selector {
  @include content-example(blue) {
    color: green; // this is extra "content" we're sending over
  }
}
// output
.my-selector {
  background: blue;
  color: green;
}
Kind of cool. But not as ermagerd as:

& + @content = LOVE

// ie6 star hack: "* html" works for ie6 only
@mixin ie6 {
  * html & { @content } // pay attention to the "&"
}
// apply
#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}
// output
#logo { background-image: url("/images/logo.png"); }
* html #logo { background-image: url("/images/logo.gif"); }

Two major tricks here:

  1. Usage of "&" (Referencing parent selectors) in mixin
  2. Passing an arbitrary style as @content to mixin

Cooler still. But ...

Media query refresher

  1. SASS "bubbles-up" media queries to the top level of the stylesheet
  2. Brings all the selectors on the way inside the rule.
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
// output
.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}
SASS media query reference

@content + media queries

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: 479px) { @content; }
  }
  @else if $media == wide-handhelds {
    @media only screen and (min-width: 480px) and (max-width: 767px) { 
      @content;     }
  }
}
// apply
#sidebar {
  float: left;
  width: 300px;
  @include respond-to(handhelds) { float: none; }
  @include respond-to(wide-handhelds) { float: none; }
}
// output
#sidebar { float: left; width: 300px; }
@media only screen and (max-width: 479px) { #sidebar { float: none; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { #sidebar { float: none; } }
Adapted from chrisepptein's gist

'Splain

  1. Named media queries! (handhelds, wide-handhelds)
  2. A simple switch with our query names as args
  3. The stuff we actually want to do in that media query is passed along via @content
  4. Since media queries already "bubble-up", they take our custom rules with them.

@include respond-to(tablet-portrait) { 
  @include sprites-sprite("logo-for-tablets");
}

Retina sprites?


Can you spot the @content?

Easy application:
// setup code here
// apply normal and 2x versions of pngs to elements.icon-target {
 @include retina-sprite-item('target', $sprites, $sprites2x);
}

Iconfonts like compass sprites



// see gist for detailed setup@mixin icon-font($font-name) {
  @extend .icon-#{$font-name};
  @extend %icon-font;
  &:before {
   @content;
  }
}
 
//to call the search icon
@include icon-font(search) {
  padding-right: .5em;
  text-shadow: 1px 1px 2px (#000);
}

The @content takeaway

  1. Pass anything to a mixin
  2. Media queries already behave sanely in SASS
  3. @content let's media queries be more semantic
  4. @content will mainly be used in the context of media queries
  5. Can probably just include @content at the bottom of all your mixins for the added flexibility.

Appendix A


"… we hashed out whether there were performance implications of combining vs scattering Media Queries and came to the conclusion that the difference, while ugly, is minimal at worst, essentially non-existent at best."


- Sam Richards (Snugug)


Appendix B:

9.5k instances of @content


Thanks for reading this far!


SASS @content

By Christopher Bloom

Made with Slides.com

SASS @content

The power of @content in SASS.

  • 5,788

More from Christopher Bloom