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?

Kris Bulman's retina sprite mixin

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


https://gist.github.com/micahgodbolt/5339017

// 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

Performance concerns regarding scattered media queries in compiled CSS

"… 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


Keyframes, ::selection, IE-specific stuff, lots more

Thanks for reading this far!


Made with Slides.com