Sass - Making CSS fun again

Making CSS fun again :)

About

○ Front end developer at Conrad Caine

○ Analysis and development of systems at SENAC

This is my first presentation and everything can be boring... so let's drink beer!

I will talk about

○ CSS weaknesses

○ Syntax

○ Features

○ Techniques

○ ...

CSS WEAKNESSES

○ No variables

○ Prefixes

○ Lack of abstraction

○ Hard to maintain (mainly in big css files)

What's wrong with CSS?

THE SOLUTION

○ Sass

○ Less

○ Stylus

CSS Preprocessors

They are the most popular.

WHAT ARE CSS PREPROCESSORS?

"CSS preprocessors take code written in the preprocessed

language and then convert that code into the same old css

we’ve been writing for years."

What are CSS Preprocessor?

STARTING WITH SASS

○ Syntactically Awesome StyleSheets

○ Sass makes CSS fun again

○ Sass get installed as Ruby gem, then you need to have

Ruby on your machine.

About

gem install sass

Installing

○ Create a .scss file

○ Watch this .scss

○ Sass will create your .css

○ Be happy!

The Process

sass --watch dev.scss:style.css

Watching a .scss file

Sass allows you to choose between four different output

styles using the --style command-line flag.

sass --watch dev.scss:style.css --style nested

sass --watch dev.scss:style.css --style expanded

sass --watch dev.scss:style.css --style compact

sass --watch dev.scss:style.css --style compressed

Output style

VARIABLES

How can we do this today?

/* dev.scss */$width: 100px;$color: #00214D;$size: 16px;

.side { width: $width;}

.bar { width: $width; font-size: $size; color: $color;}

Variables

/* output */.side { width: 100px;}

.bar { width: 100px; font-size: 16px; color: #00214D;}

/* dev.scss */$width: 600px;$length: 3;

.nav li { width: $width / $length}

Math operations

/* output */.nav li { width: 200px;}

/* dev.scss */$color: #ce4dd6;

.nav a { color: lighten($color, 20%); &:hover { color: lighten($color, 10%); }}

Color functions

/* output */.nav a { color: #e5a0e9;}.nav a:hover { color: #d976e0;}

NESTING

/* primate.css */.nav li { list-style:none; float:left;}

.nav li a { display:block; padding:5px;}

We are accustomed to do this:

/* dev.scss */.nav { li { list-style:none; float:left; a { display:block; color:blue; } }}

Now we can do this:

/* output */.nav li { list-style: none; float: left;}

.nav li a { display: block; color: blue;}

Parent Reference

/* dev.scss */.nav { li { list-style:none; float:left; a { display:block; color:blue; &:hover { color:red; } } }}

/* output */.nav li { list-style: none; float: left;}

.nav li a { display: block; color: blue;}

.nav li a:hover { display: block; color: red;}

MIXINS

/* primate.css */.nav li a { padding: 5px; border: 1px solid red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

Mixins

/* dev.scss */@mixin borderRadius { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.nav li a { padding: 5px; border: 1px solid red; @include borderRadius;}

Mixins

/* output */.nav li a { padding: 5px; border: 1px solid red; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

/* dev.scss */@mixin title($size) { font: { family: arial; size: $size; weight: bold; }}

article h2 { @include title(40px);}

Arguments

/* output */article h2 { font-family: arial; font-size: 40px; font-weight: bold;}

INHERITANCE

/* dev.scss */.nav {

background: #CCC;border: 1px solid red;

}

.category {@extend .nav;

}

Inheritance

/* output */.nav, .category { background: #CCC; border: 1px solid red;}

INTERPOLATION

/* dev.scss */$name: box;$attr: border;p.#{$name} { #{$attr}-color: blue;}

Interpolation

/* output */p.box { border-color: blue;}

@import

@import

core.css fonts.css reset.css footer.css

/* dev.scss */@import "reset.scss";@import "fonts.scss";@import "footer.scss";

@import

/* output */

/* reset */html {}

/* fonts */@font-face {}

/* footer */footer {}

Control Directives

/* dev.scss */$type: 'games';

p { @if $type == sports { color: green; } @else if $type == games { color: blue; } @else { color: red; }}

@if

/* output */

p { color: blue;}

/* dev.scss */@for $i from 1 through 3 { .item-#{$i} { font-size: 12px * $i; }}

@for

/* output */.item-1 { font-size: 12px;}

.item-2 { font-size: 24px;}

.item-3 { font-size: 36px;}

/* dev.scss */@each $type in a, b, c { .#{$type}-icon { background-image: url('/images/#{$type}.png'); }}

@each

/* output */.a-icon { background-image: url("/images/a.png");}

.b-icon { background-image: url("/images/b.png");}

.c-icon { background-image: url("/images/c.png");}

/* dev.scss */$i: 6;@while $i > 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2;}

@while

/* output */.item-6 { width: 12px;}

.item-4 { width: 8px;}

.item-2 { width: 4px;}

Thank you!

○ gabrielneutzling@gmail.com

○ facebook.com/gneutzling

○ @gneutzling