Agile css development with Compass/SASS

JS DAY - VERONA - May 14th 2014

Andrea Verlicchi @verlok www.andreaverlicchi.eu

Agile CSS Development with

/ SASS

About me

• Andrea Verlicchi!

• Front-end architect (also PHP developer)!

• www.andreaverlicchi.eu twitter: @verlok

Let's talk about CSS

CSS can become messy

• Many site sectionshome, landings, products, etc.!

• Many page sectionsheader, footer, main, etc.!

• Many devicesdesktop, tablet, smartphone, etc.!

• Many screen resolutions!

• Many colors, fonts, helpers, etc.

CSS can become messy

• Not a unique author!

• Not a unique coding style

CSS can become looong

• long CSS file vs split CSS file we could split the code into more CSS files, but it would result in less performing websites (more HTTP requests)!

• long CSS file vs code readability code is less readable if files are very long, especially when you first look to someone else's code

CSS can be repetitive

• Sandboxed rules!

article header {...} article h1 {...} article p {...} article footer {...} article .author {...}!

• Rules that share styles!

button { background-color: #BADA55 } a { color: #BADA55 } body { border-bottom: 5px solid #BADA55 }

CSS is not a complete language

• No variables (yet)!

• No extensibility!

• No math (yet)!

• Just a few functions (rgb, rgba, ...)

What if all this could CHANGE?

What if we could use...

What if we could use...

Variables?Nesting?

Functions? Math?

Partials?

Variables?Nesting?

Functions? Math?

SASS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the

world.!

http://sass-lang.com

HOW IT WORKS - DEV

YOU WRITE SASS / SCSS

IT CREATES CSS

IT WATCHES!FOR CHANGES

HOW IT WORKS - PROD

YOU WRITE SASS / SCSS

COMPILE

IT CREATES CSS

NESTING!!article li {margin-right: 1em;

}!article a {color: white;background: red;display: block;

}!article a:hover {color: red;background: white;

}

article {!li {margin-right: 1em;

}!a {color: white;background: red;display: block;!&:hover {color: red;background: white;

}}

}

!!button {

background: #CE4DD6;}!a {

color: #CE4DD6;}!header {

border-bottom: 3px;border-color: #CE4DD6;

}

$mainColor: #CE4DD6;!button {

background: $mainColor;}!a {

color: $mainColor;}!header {

border-bottom: 3px;border-color: $mainColor;

}

VARIABLES

FUNCTIONS

button {color: #CE4DD6;

}!button:hover {

color: #D76DDE;}

button {color: $mainColor;

}!button:hover {

color: saturate($mainColor, 10%);}

MATH!!#side {width: 23.95833%;margin: 2.08333%;

}!#main {width: 47.91667%;margin: 2.08333%;

}!#more {width: 23.95833%;

}

$width: 960px;!#side {width: percentage(230px / $width);margin: percentage(10px / $width);

}!#main {width: percentage(460px / $width);margin: percentage(10px / $width);

}!#more {width: percentage(230px / $width);

}

PARTIALS

// === site.scss ===!@import "normalize";@import "fonts";@import "mixins"; @import "headerFooter";@import "helpers";@import "forms";………@import "whatever";

(very long CSS file) !html {line-height:1;}!ol,ul {list-style:none;}!table {border-collapse:collapse;border-spacing:0;}!caption,th,td {text-align:left;font-weight:400;vertical-align:middle;}!q,blockquote {quotes:none;}!q:before,q:after,blockquote:before,blockquote:after {content:none;}!a img {border:none;}!body {font-family:Tahoma, sans-serif;font-size:87.5%;-webkit-text-size-adjust:none;}!h1,h2,h3,h4,h5,h6,#payoff {line-height:1.5em;}!p {margin-bottom:6px;line-height:1.5em;}!abbr,acronym {border-bottom:1px dotted #690;cursor:help;}!#language,#loginMessage {position:absolute;}!#content {position:relative;}!#accountZone {display:none;float:right;border-radius:10px;}!#accountZone li {display:block;float:left;}!#accountZone a {display:block;padding:8px 10px;}!#accountZone form,#accountZone #regeneratePwd {float:left;}!#loginForm form {padding:6px 10px 5px;}!#loginForm button {font-size:91.66667%;border:0;background:#eee;height:18px;text-align:center;width:auto;box-shadow:inset 0 -2px 5px rgba(0,0,0,0.3);margin:0;}!#loginForm input {width:76px;height:18px;border:none;font-size:100%;outline:none;box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);padding:0 2px;}!……………

SASS 3 does all this (and lots more)

It allows you to do powerful operations!

using Mixins

It allows to choose the output CSS style,

including Compressed

It can remove comments you don't

want to publish

// this is a shameful hack

However, some developers still don't like

it...

...hard to debug?

COMPASS

Compass is an open-source CSS Authoring Framework. Compass uses SASS.!

http://compass-style.org

COMPASS extends SASS + it gives you some interesting features

Click on the file name:line to view the CSS file inspector

to get the original SASS/SCSS file name and line

1. IT'S EASY TO DEBUG!

Inspect the element you want to debug

to get the CSS rules in the inspector

2. IT'S LOADED WITH LOTS OF HELPERS &

PATTERNS

CSS3, Typography, Utilities (Reset, Clearfix), Sticky Footer, and more

You just add the images, it generates the sprite + gives you a

helper to use your images

3. IT MAKES CSS SPRITES

3. IT MAKES CSS SPRITES

@import "compass/utilities/sprites";!@import “sponsors/*.png”; // windowsAzure.png, appDynamics.png …!#sponsor_section { .sponsor1 { @include sponsors-sprite(windowsAzure, true); }! .sponsor2 { @include sponsors-sprite(appDynamics, true); }}

#sponsor_section .sponsor1,#sponsor_section .sponsor2,#sponsor_section .sponsor3 { background: url('../img/sponsors-s69e070e3f8.png') no-repeat;}!#sponsor_section .sponsor1 { background-position: 0 0; height: 171px; width: 457px;}!#sponsor_section .sponsor2 { background-position: 0 -356px; height: 95px; width: 373px;}

3. IT MAKES CSS SPRITES

Resume

SASS

• Nesting!

• Variables!

• Functions!

• Math!

• Partials

• Easy debugging!

• Easy spriting!

• Lots of helpers

COMPASS

ORGANIZATION

• Better code organization!

• No code repetition (DRY)!

• Shorter files to manage!

• Much speeder coding

HOW TO INSTALL

• Download Ruby rubyinstaller.org!

• Command prompt: gem install compass

• Download Ruby ruby-lang.com!

• Terminal: sudo gem install compass

HOW TO SETUP

• in terminal / command promptgo to your project foldercd {your/project/path}!

• create the scaffolding compass install compass!

• start watching changes / creating CSScompass watch

HOW TO START

• SCSS format is CSS compliant!

• You can start writing SCSS as if you were writing CSS / Rename your CSS files in SCSS!

• Start using variables and nesting!

• Organize your CSS code in partials!

• Do more complex things using mixins, etc.

SOME ADVICE

• Keep in mind that you’re still writing CSS, always figure how your CSS will become!

• Avoid unnecessary nesting (a maximum of 3 levels is often enough)!

• In continuous integration environments, always run compass clean before compass compile (especially if you use branches)

GIVE IT A TRY !

• It takes no more than 30 minutes to be installed and learned!

• It's used by more and more front-end developers and companies!

• It would improve your technical skills

twitter: verlok!www.andreaverlicchi.eu

Q&A

@verlok #jsday