A presentation aimed at intermediate Sass users, as presented at the Dutch PHP Conference / Dutch Mobile Conference.
Sass in the Real WorldRoy Tomeij, @roy / AppSignal & SliceCraft
View Slide
variables are old news
today’s lesson
sass isn’t broken
✘client-sidecompilation
✘consistentline numbers
consistent line numbers@mixin hide-text {text-indent: -999px;overflow: hidden;}.foo {width: 100%;@include hide-text;}.foo {width: 100%;text-indent: -999px;overflow: hidden;}Sass CSS
✘commentswhere wanted
comments where wanted.foo {color: #fff;/* Bar */.bar {color: #ff0;}/* Baz */.baz {color: #00f;}}.foo {color: #fff;/* Bar *//* Baz */}.foo .bar {...}.foo .baz {...}Sass CSS
✘dynamicvariables
dynamic variables$men-color: red;$women-color: green;$kids-color: blue;@each $context in men, women, kids {.foo-#{$context} {color: $#{$context}-color;}}Sass
dynamic variablesCSS.foo-men { color: red; }.foo-women { color: green; }.foo-kids { color: blue; }✘✘✘
dynamic variables
nested lists
what’s a list?$color: blue;$color: red, blue;$color: (red, blue);$color: red blue;$color: (red blue);Sass
nested lists$colors: men red, women green, kids blue;@each $context in $colors {.foo-#{nth($context, 1)} {color: nth($context, 2);}}Sass
nested lists.foo-men {color: red; }.foo-women {color: green; }.foo-kids {color: blue; }CSS
nested listsin the real world
$events-color: red;$ate-color: green;$essentials-color: blue;.teaser {margin-bottom: 25px;h1 { color: black; }.button { background: white; }&.events {h1 { color: $events-color; }.button { background: $events-color; }}} Sass
.teaser {margin-bottom: 25px;h1 { color: black; }.button { background: white; }@include colors('h1', 'color');@include colors('.button', 'background');}omgsass!Sass
$events-color: red;$ate-color: green;$essentials-color: blue;$colors: events $events-color, ate $ate-color,essentials $essentials-color;@mixin colors($selector, $properties) {@each $color in $colors {&.#{nth($color, 1)} #{$selector} {@each $property in $properties {#{$property}: nth($color, 2)}}}} Sass
.teaser { margin-bottom: 25px; }.teaser h1 { color: black; }.teaser .button { background: white; }.teaser.events h1 { color: red; }.teaser.ate h1 { color: green; }.teaser.essentials h1 { color: blue; }.teaser.events .button { background: red; }.teaser.ate .button { background: green; }.teaser.essentials .button { background:blue; }CSS
nested lists& media queries
.foo {color: red;@include respond-to(tablet) {color: green;}@include respond-to(phone) {color: blue;}}Sass
$devices: tablet 768px, phone 320px;@mixin respond-to($respond-to) {@each $device in $devices {@if nth($device, 1) == $respond-to {@media (max-width: nth($device, 2)) {@content;}}}}Sass
.foo {color: red;}@media (max-width: 768px) {.foo { color: green; }}@media (max-width: 320px) {.foo { color: blue; }}CSS
handy tools
round(),ceil(), join()& many more!
dynamic button colors$bg-color: green;.button {background: $bg-color;@if lightness($bg-color) < 50% {color: white;} @else {color: black;}}Sass
@function button-font-color($bg-color) {@if lightness($bg-color) < 50% {@return white;} @else {@return black;}}$bg-color: green;.button {background: $bg-color;color: button-font-color($bg-color);}Sass
$bg-color: green;.button {background: $bg-color;color: if(lightness($bg-color) < 50%,white,black);}Sass
inline images.facebook {background: inline-image("facebook.png");}.facebook {background: url('data:image/png;base64,…');}CSSSass + Compass
retina sprites
$sprites: sprite-map("sprites/*.png");$sprites-retina: sprite-map("sprites-retina/*.png");@mixin sprite-background($name) {width: image-width(sprite-file($sprites, $name));height: image-height(sprite-file($sprites, $name));background: sprite-url($sprites) sprite-position($sprites, $name) ↩no-repeat;display: block;@media (-webkit-min-device-pixel-ratio: 2), (etc...) {@if (sprite-position($sprites, $name) != ↩sprite-position($sprites-retina, $name)) {$ypos: round(nth(sprite-position($sprites-retina, $name), 2) / ↩2);background-position: 0 $ypos;}background-image: sprite-url($sprites-retina);@include background-size(ceil(image-width( ↩sprite-path($sprites-retina)) / 2), auto);}} http://gist.github.com/2140082 / Sass + Compass
more than compass
Bourbon,Foundation,Sassy Buttons,Zocial,Sass Twitter Bootstrap,Animate.sass,Forge (WP development with Sass),Susy,Gravity,BlankWork,Gridsetand many more.
things you may not know
comments in production$year: 2013;/* Some comment. *//*! Comment #2. *//*! © #{$year} *//* Comment #2. *//* © 2013 */Sass CSS
unquote()@mixin border-radius($rad, $v-rad) {-moz-border-radius: $rad unquote("/") $v-rad;border-radius: $rad unquote("/") $v-rad;}Sass
unquote().foo {color: unquote("$replaceme");}.foo {color: $replaceme;}CSSSass
.foo {box-shadow: 1px 1px 1px red;.no-boxshadow & { border: solid 1px red; }}.foo { box-shadow: 1px 1px 1px red; }.no-boxshadow .foo { border: solid 1px red; }CSSSassparent reference
variable defaults@import "settings";$default-radius: 10px !default;@mixin border-radius($radius: $default-radius){border-radius: $default-radius;} Sass$default-radius: 15px; settings.scss
variable arguments@mixin foo($args...) {/* $args is a list now! */}h1 {@include foo(#000, #fff, #ddd);}Sass
sass globbing@import "library/mixins/*";@import "library/**/*";https://github.com/chriseppstein/sass-globbing / Sass
questions?@royhttp://roy.io/realworld
thanks shorpy.com!for the awesome pictures