JS DAY -VERONA - May 14th 2014
AndreaVerlicchi @verlok www.andreaverlicchi.eu
Agile CSS Development with
/ SASS

About me
• AndreaVerlicchi!
• Front-end architect
(also PHP developer)!
• www.andreaverlicchi.eu
twitter: @verlok

Let's talk about CSS

CSS can become messy
• Many site sections
home, landings, products, etc.!
• Many page sections
header, footer, main, etc.!
• Many devices
desktop, 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 prompt
go to your project folder
cd {your/project/path}!
• create the scaffolding
compass install compass!
• start watching changes / creating CSS
compass 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