Zen of CSS Preprocessors

Patrick Arlt

Experience Developer - ArcGIS for Developers

@patrickarlt - http://bit.ly/1aNWRNx

What?

Tools that add additonal tools and features to CSS.

• Variables
• Nesting
• Building
• Functions
• Lots of other stuff

Sounds Cool! What should I use

• SASS
• Less
• Stylus

I'll focus on SASS.

Why SASS?

• Most stable and mature preprocessor
• Node (C) and Ruby implimentations
• Tons of differentiating features
• Use your existing CSS files
• Largest community
• The most framework support
• The most tooling (all others Node JS only)

Why NOT Less?

• Major projects are moving away from it (Dojo, Bootstrap)
• Smaller feature set
• Smaller community
• Slower compilation speeds

Why NOT Stylus

• Slowing development pace
• No support from major projects or frameworks
• Most minor frameworks also have a SASS implimentation
• No outstanding features other then syntax

Show Me The Feautres!

Variables

$body-font: "Lucida Grande","Segoe UI", Arial, sans-serif;
$header-font: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

body {
	font-size: 100%;
	font-family: $body-font;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $header-font;
}

Defaults

$button-color: #005E95;
$button-color: #D71C0D !default; // doesn't override

.button {
	padding: 1em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border-radius: 3px;
	background: $button-color;
}

Partials and Imports

// framework/_defaults.scss

$button-color: #005E95 !default;
$body-font: Helvetica, Arial, sans-serif !default;
$header-font: $body-font !default;

// _my-config.scss

$button-color: #005E95;
$body-font: "Lucida Grande","Segoe UI", Arial, sans-serif;
$header-font: "Avenir LT W01 35 Light", Arial, Helvetica, sans-serif;

// main.scss
@import "framework/defaults";
@import "my-config";
@import "framework";

body {
	font-size: 100%;
	font-family: $body-font;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $header-font;
}

.button {
	padding: 1em;
	$background: $button-color;
}

Nesting

.header-bar {
  background: #3984D2;
  padding: 1rem;
  font-family: sans-serif;
  color: white;
  h1 {
    margin: 0;
    padding: 0;
    font-weight: 500;
  }
  a {
    text-decoration: none;
    display: inline-block;
    border: 1px solid white;
    margin: 1rem 0 0 0;
    padding: 0.75rem 2rem;
    color: white;
  }
}

Nesting Continued

.button {
	padding: .75rem 1.5em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border-radius: 3px;
	background: #005E95;
	border: 2px solid #005E95;
	&:hover {
	  background: transparent;
	  color: #005E95;
	}
	&.danger {
	  background: #C01E1A;
	  border-color: #C01E1A;
	  &:hover {
	    background: transparent;
	    color: #C01E1A;
	  }
	}
}

Nesting Continued

.button {
	padding: .75rem 1.5em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border-radius: 3px;
	background: #005E95;
	border: 2px solid #005E95;
	&:hover {
	  background: transparent;
	  color: #005E95;
	}
	&-danger {
	  background: #C01E1A;
	  border-color: #C01E1A;
	  &:hover {
	    background: transparent;
	    color: #C01E1A;
	  }
	}
}

@mixin

@mixin button-color($color){
  background: $color;
  border-color: $color;
  &:hover {
    background: transparent;
    border-color: $color;
    color: $color;
  }
}

.button {
	padding: .75rem 1.5em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border: 2px solid;
	@include button-color(#005E95);
	&.danger {
	  @include button-color(#C01E1A);
	}
}

@media

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: white;
}

body {
  background: green;
  @media screen and (max-width: 1024px) {
    background: blue;
  }
  @media screen and (max-width: 768px) {
    background: red;
  }
}

@mixin for Responsive Design

@mixin on-small-screens (){
  @media screen and (max-width: 768px){
    @content
  }
}

.article-header {
  font-family: sans-serif;
  font-size: 4rem;
  @include on-small-screens {
    font-size: 2rem;
  }
}

IE Specific @mixin

<!--[if IE 8]><html class="ie ie8"><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

@mixin for-ie8(){
  html.ie8 & {
    @content;
  }
}

.my-layout {
  float: left;
  @include for-ie8 {
    float: none;
  }
}

@mixin for Print Styles

@mixin for-print(){
  @media print {
    @content
  }
}

header {
  background: black;
  color: white;
  @include for-print {
    background: white;
    color: black;
  }
}

Retina Display @mixin

@mixin for-retina-display {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx){
      @content
  }
}

small {
  font-size: 13px;
  @include for-retina-display {
    font-size: 11px;
  }
}

@extend

@mixin button-color($color){ ... }

.button {
  padding: .75rem 1.5em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border: 2px solid;
	@include button-color(gray);
}

.main-button {
  @extend .button;
  @include button-color(#005E95);
}

.danger-button {
  @extend .button;
  @include button-color(#C01E1A);
}

@placeholder

@mixin button-color($color){ ... }

%button {
  padding: .75rem 1.5em;
	display: inline-block;
	font-family: sans-serif;
	color: white;
	text-decoration: none;
	border: 2px solid;
}

.main-button {
  @extend %button;
  @include button-color(#005E95);
}

.danger-button {
  @extend %button;
  @include button-color(#C01E1A);
}

Stuff using SASS

• Bootstrap
• Foundation
• BassCSS
• Bourbon/Neat/Bitters
• Compass

Get Started

• Install SASS (Node or Ruby)
• Learn SASS
• Grunt Plugin (node-sass or Ruby SASS )
• Gulp Plugin (node-sass or Ruby SASS )

Thanks!

Twitter: @patrickarlt

http://bit.ly/1aNWRNx