Fork me on GitHub

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?

  • 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



Esri