SASS In The Real World

SASS IN THE REAL WORLDTom Crinson - Front End Suffolk - April 30th

Hello.

I’m a Developer.

CSSis

MOREthanjustTEXT

Structured.

Ordered.

DRY.(don’t repeat yourself)

SASS.(syntactically awesome stylesheets)

A meta language on top of CSSAims to describe the structure of the document cleanly andstructurallySimpler and more elegant syntaxAdds very handy features for creating more manageablestylesheets

•

•

•

•

Intended Target.

We have a winner.

Are you ready?

The Stylesheet.

.style4 { color: #FFFFFF; font-weight: bold; font-size: x-small;}.style5 { border-color: #FF00FF; border-width: 1px; background-color: #FF0000;}.style6 { border: 1px solid #FFFFFF;}.style7 { color: #000000;}.style8 { color: #000000; font-weight: bold;}.style13 { font-family: "Arial Black"; color: #666666;}.style54 { background-color: #FFFF00;}

Everywhere!

Issue 1: Colour Scheme.

Solution 1: Variables.

$colour_background: #FFFFFF;$colour_border: #FF00FF;$colour_bordered_background: #FF0000;$colour_first_letter_highlight: #000;$colour_table_border: #000;$colour_text_highlight: #FFFF00;$colour_application: #00FF00;$colour_symposium: #0000FF;

.style5 { border-color: $colour_border; border-width: 1px; background-color: $colour_bordered_background;}.style6 { border: 1px solid $colour_background;}.style7 { color: $colour_first_letter_highlight;}

Solution 1: Why?

Keeps colour information in one placeGives the colours meaningful names not necessarily based oncolourEasy to changeReduces duplication

•

•

•

•

Extra Extra!(functions)

$colour_background: #FFFFFF;$colour_border: darken($colour_background, 10%);$colour_bordered_background: #FF0000;$colour_first_letter_highlight: #000;$colour_table_border: complement($colour_background);

Issue 2: Nesting Duplication..style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small;}

.style194 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma; font-size: small;}

.style59 { font-weight: bold; color: $colour_bordered_background; margin: 0 5px; font-family: Tahoma;}

.style71 { font-size: small;}

.style66 { font-family: Calibri; font-weight: bold;}

 2012 Annual Meeting April 14, 2012 Ashland University 

Solution 2: Proper CSS.

.style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small;}.style196 .style59 { font-weight: bold; font-family: Tahoma;}.style59 .style71 .style66 { font-family: Calibri;}.style196 .style194 { font-weight: bold; font-family: Tahoma;}

.style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small;}





Solution 2: Nested Rules.

.style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small; .style59 { font-weight: bold; font-family: Tahoma; .style66 { font-family: Calibri; } } .style194 { font-weight: bold; font-family: Tahoma; }}

.style196 { color: $colour_bordered_background; font-weight: 700; font-family: Calibri; margin: 0 5px; font-size: small;}





Solution 2: Why?

Eliminates duplication - fewer chances for bugs to sneak inShorter - easier to readIt’s a pain to have to type out long selectors

•

•

•

Extra Extra!(parent references)

#complicated_selector p > a{ border:1px solid red;}

#complicated_selector p > a:hover { border:1px solid blue;}

#complicated_selector p > a:visited { border:1px solid green;}

#complicated_selector p > a{ border:1px solid red; &:hover { border:1px solid blue; }

&:visited { border:1px solid green; }}

Warning!

Be careful how deep you nest; it can become very confusing!•

Issue 3:Duplication.

.style3 { font-family: "Arial Black"; font-size: x-small; margin-top: 0; margin-bottom: 0;}.style4 { color: $colour_background; font-weight: bold; font-size: x-small;}.style10 { font-family: Verdana; font-size: x-small; margin-top: 0; margin-bottom: 0;}

Solution 3: Mixins .@mixin font-style($family: Arial, $size: x-small, $weight: normal){ font-family: $family; font-size: $size; font-weight: $weight;}

.style3 { @include font-style("Arial Black", x-small); margin-top: 0; margin-bottom: 0;}.style4 { color: $colour_background; @include font-style("Arial", x-small, bold);}.style10 { @include font-style("Verdana", x-small); margin-top: 0; margin-bottom: 0;}

A Better Example.(Browser Prefixes)

@mixin rounded($radius: 10px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius;}

.rounded_box{ @include rounded;}

Solution 3: Why?

Groups together frequently copied bits of code for ease of reuseEliminates copy & paste errorsParameterized functions are awesome

•

•

•

Issue 4:Mixing Concerns.

/* =========== Brochure Styles =========== */

.style6 { border: 1px solid $colour_background;}.style7 { color: $colour_first_letter_highlight;}.style8 { color: $colour_first_letter_highlight; font-weight: bold;}.style10 { @include font-style("Verdana", x-small); margin-top: 0; margin-bottom: 0;}.style11 { font-family: Verdana;}.style12 { font-size: x-small;}

/* ============ Product Pages ============ */.style13 { font-family: "Arial Black"; color: #666666;}.style14 { font-family: Verdana; margin-top: 0; margin-bottom: 0;}.style16 { @include font-style("Arial", x-small); color: $colour_first_letter_highlight; margin-top: 0; margin-bottom: 0;}

style.css

Solution 4: Multiple Links.

<link href="/stylesheets/products.css" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/home.css" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/brochure.css" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/about.css" media="screen" rel="stylesheet" type="text/css" />Noooo!!!

Solution 4: @Import.

@import "home";@import "about";@import "brochure";@import "products";

@include home;@include about;@include brochure;@include products;

home.scssabout.scss

brochure.scssproducts.scss

Solution 4: Why?

Breaks stylesheets into more logical sections - forcing you tothink about where each rule belongsKeeps common rules togetherNo overhead in the browser

•

•

•

Further Awesomeness.

Sass Docs - http://sass-lang.com/Compass - http://compass-style.org its like Sass on Steroids

•

•

Final Stylesheet.

$colour_background: #FFFFFF;$colour_border: #FF00FF;$colour_bordered_background: #FF0000;$colour_first_letter_highlight: #000;$colour_table_border: #000;$colour_text_highlight: #FFFF00;$colour_application: #00FF00;$colour_symposium: #0000FF;

@import "home";@import "about";@import "brochure";@import "products";

@include home;@include about;@include brochure;@include products;

Goodbye.

Image Credits.

http://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html

http://www.flickr.com/photos/23679420@N00/4573193013/

http://www.flickr.com/photos/mr_t_in_dc/4800819674/sizes/m/in/photostream/

•

•

•

Technology

SASS In The Real World