Getting SASSY with your CSS

Patrick Arlt

Experience Developer - Esri Portland R&D Center

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

I work on ArcGIS for Developers and there is ALOT of CSS

...I mean ALOT of CSS

50+ files
14,000+ lines
A custom in-house CSS framework
Dozens of design patterns

SASS

Compass

SASS?

CSS Preprocessor
Compiles .scss to files .css
Features to help write CSS
SASS is a superset of CSS

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

`@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

Lets Abuse Our New Powers

Abusing SASS - Over Nesting

Abusing nesting can bloat file size.

Example - Solution

Inception Rule: never go more then 3 levels deep

Abusing SASS - Comma Operator

The comma selector multiplies the amount of nesting

Example - Solution

Try not to use the comma operator when you are nesting

Abusing SASS - Overusing `@mixin`

Mixins easily bloat files with duplicate properties

Example - Solution

Mixins are dynamic, extend is static

Get Started

sass command line tool (Ruby)
libsass if you hate Ruby
IDE Integration (Visual Studio, Eclipse, ect…)
Build Systems (Ant, Maven, Grunt, Gulp, ect…)
Frameworks (Rails, Express, Django)
Apps (Koala, Codebox, Hammer)

Compass and Bourbon

Extend SASS
Mixins for CSS 3
Typography & Layout

Fun w/ Compass

http://sassmeister.com/gist/9333804

Fun w/ Burbon

http://sassmeister.com/gist/9333958

Compass VS Bourbon

Compass

Steep learning curve
Powerful rools
Compass ecosystem
Requires Ruby

Bourbon

Shallow learning curve
Just SASS
Common components
Easier to integrate

Thanks

Twitter : @patrickarlt

Slides : http://bit.ly/1nwMrmp

Getting SASSY with your CSS

Patrick Arlt

I work on ArcGIS for Developers and there is ALOT of CSS

...I mean ALOT of CSS

SASS?

Variables

Defaults

Partials and Imports

Nesting

Nesting Continued

@mixin

@media

@mixin for Responsive Design

IE Specific @mixin

@mixin for Print Styles

Retina Display @mixin

@extend

@placeholder

Lets Abuse Our New Powers

Get Started

Compass and Bourbon

Fun w/ Compass

Fun w/ Burbon

Compass VS Bourbon

Compass

Bourbon

Thanks

`@mixin`

`@media`

`@mixin` for Responsive Design

IE Specific `@mixin`

`@mixin` for Print Styles

Retina Display `@mixin`

`@extend`

`@placeholder`