The police of stylesheets

=

@bneiluj - All right reserved.

Session 1

(B.Y.O.L.)

JulienBouteloup

cannot Be sued for potential grammatical errors … or non - sense.

100% Sassy

@bneiluj

First: What is Css ?

“CSS on its own can be FUN (awful), but

stylesheets are getting larger, more complex,

and harder to maintain.”

This is where a preprocessor can help...

full repetitions !

unclear relationships !

no process !

“Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS Sass fun again. “

FUN

smartPrettyRobust

Solution ? Sass ! such a surprise :-)

Let’s get start !

Setup:

> Sass --watch filename.scss

it will watch your changes and compile them into css

Rubygems.orgRuby

Comments:

yes

//

/****/

Nothing!

Variables: Variables

The variable call !

Nesting:

compiled css

Import:

Reset file here !

Sass builds on top of the current CSS

@import but instead of requiring an

HTTP request, Sass will take the file that

you want to import and combine it

with the file you're importing into so

you can serve a single CSS file to the

web browser.

Mixins:

Include your mixin here and pass 10px as a parameter!

Because you want to reuse border-radius

use a variable $radius

Extend:

Your css is not duplicated !

compiled css

Functions:

use a MATH expressions

parameters

Return value

compiled css

How to use it

well… and now ?

Organiseyour Sass code and Files

Live Demo !

Session 2 ?

Full sass

ViewPort

Media Queries

100% refactored

FUN

Automatic

build a 100% Sass homepage !