Fork me on GitHub

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;
}
http://sassmeister.com/gist/9313333

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;
}
http://sassmeister.com/gist/9330033

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;
  }
}
http://sassmeister.com/gist/9330186

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;
	  }
	}
}
http://sassmeister.com/gist/9330666

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;
	  }
	}
}
http://sassmeister.com/gist/36c93d5622f4f101558c

@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);
	}
}
http://sassmeister.com/gist/9331344

@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;
  }
}
http://sassmeister.com/gist/9331447

@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;
  }
}
http://sassmeister.com/gist/9331704

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;
  }
}
http://sassmeister.com/gist/9331753

@mixin for Print Styles

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

header {
  background: black;
  color: white;
  @include for-print {
    background: white;
    color: black;
  }
}
http://sassmeister.com/gist/9332042

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;
  }
}
http://sassmeister.com/gist/9332258

@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);
}
http://sassmeister.com/gist/9332450

@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);
}
http://sassmeister.com/gist/9332472

Stuff using SASS

Get Started

Thanks!

Twitter: @patrickarlt

http://bit.ly/1aNWRNx

Esri