Sass - 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
○ ...

What's wrong with CSS?
○ No variables
○ Prefixes
○ Lack of abstraction
○ Hard to maintain (mainly in big css files)

CSS Preprocessors
○ Sass
○ Less
○ Stylus

They are the most popular.

What are CSS Preprocessor?
"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."

About
○ Syntactically Awesome StyleSheets
○ Sass makes CSS fun again
○ Sass get installed as Ruby gem, then you need to have
Ruby on your machine.

The Process
○ Create a .scss file
○ Watch this .scss
○ Sass will create your .css
○ Be happy!

Watching a .scss file
sass --watch dev.scss:style.css

Output style
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

Variables
/* dev.scss */ /* output */
$width: 100px; .side {
$color: #00214D; width: 100px;
$size: 16px; }

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

Math operations
$width: 600px; .nav li {
$length: 3; width: 200px;
}
.nav li {
width: $width / $length
}

Color functions
$color: #ce4dd6; .nav a {
color: #e5a0e9;
}
.nav a {
.nav a:hover {
color: lighten($color, 20%); color: #d976e0;
&:hover { }
color: lighten($color, 10%);
}
}

We are accustomed to do this:
/* primate.css */
.nav li {
list-style:none;
float:left;
}

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

Now we can do this:
.nav { .nav li {
li { list-style: none;
float: left;
list-style:none;
}
float:left;
a { .nav li a {
display:block; display: block;
color:blue; color: blue;
} }
}
}

Parent Reference
.nav { .nav li {
li { list-style: none;
float: left;
list-style:none;
}
float:left;
a { .nav li a {
display:block; display: block;
color:blue; color: blue;
&:hover { }
color:red;
.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
@mixin borderRadius { .nav li a {
-moz-border-radius: 10px; padding: 5px;
10px; -moz-border-radius: 10px;
border-radius: 10px; 10px;
} border-radius: 10px;
}
.nav li a {
padding: 5px;
@include borderRadius;
}

Arguments
@mixin title($size) { article h2 {
font: { font-family: arial;
font-size: 40px;
family: arial;
font-weight: bold;
size: $size; }
weight: bold;
}
}

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

Inheritance
.nav { .nav, .category {
background: #CCC; background: #CCC;
}
}

.category {
@extend .nav;
}

Interpolation
$name: box; p.box {
$attr: border; border-color: blue;
}
p.#{$name} {
#{$attr}-color: blue;
}

@import

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

@import
@import "reset.scss";
@import "fonts.scss"; /* reset */
@import "footer.scss"; html {}

/* fonts */
@font-face {}

/* footer */
footer {}

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

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

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

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

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

@while
$i: 6; .item-6 {
@while $i > 0 { width: 12px;
}
.item-#{$i} { width: 2px *
$i; }
.item-4 {
$i: $i - 2; width: 8px;
} }

.item-2 {
width: 4px;
}

Thank you!
○ gabrielneutzling@gmail.com
○ facebook.com/gneutzling
○ @gneutzling

Sass - Making CSS fun again.

More Related Content

What's hot (19)

Similar to Sass - Making CSS fun again. (20)

Recently uploaded (20)

Sass - Making CSS fun again.