Sass e Less sono due Framework CSS. E' possibile utilizzare dei costrutti tipici dei linguaggi di programmazione (variabili, funzioni,..) che vengono poi compilati in un plain CSS valido.

1. Sass 3 e
Less( +Compass )
Un modo differente di scrivere CSS
http://it.linkedin.com/in/robertcasanova

2. Sommario
Cos’è Sass?
Installare Sass
Esempi Pratici di utilizzo
Cos’è Less?
Principali differenze Less/Sass
Breve introduzione a Compass
Conclusioni

3. Cos’è Sass?
http://sass-lang.com
CSS 2.0
Un modo strutturato e scalabile di scrivere CSS
(partials)
Coerenza e riutilizzo
Write less, do more!!!

4. Installare Sass
$ gem install sass
$ mv style.css style.scss
$ sass --watch style.scss:style.css

5. Nesing 1
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px;
ul { list-style-type: none } }
li { #navbar ul {
float: left; list-style-type: none;
a{ }
font-weight: bold; #navbar ul li {
} float:left;
} }
} #navbar ul li a {
font-weight: bold;
}

6. Nesting 2
a{ a{
color: #fff; color: #fff;
&:hover { }
color: #f3f3f3; a:hover {
} color: #f3f3f3;
&:active { }
color: #eee; a:active {
} color: #eee;
} }

7. Variables
$red-tim: #CE0000;
$blu-tim: #003E7A;
.sidebar {
color: #003E7A;
.sidebar {
}
color: $blu-tim;
.sidebar a, .sidebar strong {
a, strong {
color: #CE0000;
color: $red-tim;
}
}
}

8. Operations&Functions
#navbar {
$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;
#navbar {
width: $navbar-width; width: 800px;
border-bottom: 2px solid $navbar-color; border-bottom: 2px solid
li {
#ce4dd6; }
float: left; #navbar li {
width: $navbar-width/$items - 10px; float: left;
background-color:
width: 150px;
lighten($navbar-color, 20%); background-color: #e5a0e9; }
&:hover { #navbar li:hover {
background-color:
lighten($navbar-color, 10%);
background-color: #d976e0; }
}
}
}

9. Mixin
/* style.css */
#navbar li {
border-top-radius: 10px;
@mixin rounded($side, $radius: 10px) { -moz-border-radius-top: 10px;
border-#{$side}-radius: $radius; -webkit-border-top-radius:
10px; }
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius; #footer {
} border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius:
#navbar li { @include rounded(top); } 5px; }
#footer { @include rounded(top, 5px); }
#sidebar {
#sidebar { @include rounded(left, 8px); }
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius:
8px; }

10. @import
/* _rounded.scss */ #navbar li {
border-top-radius: 10px;
@mixin rounded($side, $radius: 10px) { -moz-border-radius-top: 10px;
border-#{$side}-radius: $radius; -webkit-border-top-radius:
-moz-border-radius-#{$side}: $radius; 10px; }
-webkit-border-#{$side}-radius: $radius;
} #footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius:
/* style.scss */ 5px; }
@import "rounded"; #sidebar {
border-left-radius: 8px;
#navbar li { @include rounded(top); } -moz-border-radius-left: 8px;
#footer { @include rounded(top, 5px); } -webkit-border-left-radius:
#sidebar { @include rounded(left, 8px); } 8px; }

11. ..e molto altro
array
cicli, controlli if/else
@extend (creare classi che estendono altre
classi)
@debug, @warn

12. Output Style
$ sass --style nested --watch
style.scss:style.css
$ sass --style expanded --watch
style.scss:style.css
$ sass --style compact --watch
style.scss:style.css
$ sass --style compressed --watch
style.scss:style.css

13. Cos’è Less?
http://lesscss.org/
Stessi costrutti di Sass (+ Namespaces, + JS
eval, - extends), sintassi leggermente differente.
https://gist.github.com/674726
E’ possibile includere un file ‘.less’
direttamente nel codice e utilizzare una libreria
JS come interprete.

14. Modi d’Uso
Lato Client:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
Lato Server: con node.js
Compilato da terminale:
$lessc styles.less > styles.css

15. Cos’è Compass
http://compass-style.org/
Un Framework CSS che non “sporca” il
markup
Una ‘libreria CSS’ basata su Sass (mixins)

16. Perchè usare Compass?
Non usa classi ‘ad hoc’ sul markup
Ti aiuta nella scrittura di CSS3
Facilita il riutilizzo e puoi usarlo per creare un
tuo Framework personale di lavoro
Se usavi Blueprint, puoi caricare il modulo
Blueprint e utilizzarlo dentro Sass

17. Un esempio
http://compass-style.org/examples/
compass/layout/stretching/

18. Conclusioni

19. Conclusioni
Ma qual’è il punto di arrivo?
Perchè studiare un framework CSS?
E’ davvero necessario?

20. Conclusioni
Ma qual’è il punto di arrivo?
Perchè studiare un framework CSS?
E’ davvero necessario?

21. Conclusioni
Ma qual’è il punto di arrivo?
Perchè studiare un framework CSS?
E’ davvero necessario?
Forse sì!

22. Responsive Design
http://thesassway.com/intermediate/responsive-web-design-part-1