�ݺ�ߣ

Sass 3 e
Less( +Compass )
Un modo differente di scrivere CSS

http://it.linkedin.com/in/robertcasanova

Sommario
Cos’è Sass?

Installare Sass

Esempi Pratici di utilizzo

Cos’è Less?

Principali differenze Less/Sass

Breve introduzione a Compass

Conclusioni

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!!!

Installare Sass

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

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

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

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;
}
}
}

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; }
ﬂoat: left; #navbar li {
width: $navbar-width/$items - 10px; ﬂoat: 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; }
}
}
}

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; }

@import
/* _rounded.scss */ #navbar li {
@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 {
-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; }

..e molto altro

array

cicli, controlli if/else

@extend (creare classi che estendono altre
classi)

@debug, @warn

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

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 ﬁle ‘.less’
direttamente nel codice e utilizzare una libreria
JS come interprete.

Modi d’Uso
Lato Client:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src=/slideshow/sass-less-and-compass-9894680/9894680/"less.js" type="text/javascript"></script>

Lato Server: con node.js

Compilato da terminale:

$lessc styles.less > styles.css

Cos’è Compass

http://compass-style.org/

Un Framework CSS che non “sporca” il
markup

Una ‘libreria CSS’ basata su Sass (mixins)

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

Un esempio

http://compass-style.org/examples/
compass/layout/stretching/

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

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

Forse sì!

Responsive Design

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

�ݺ�ߣ

Sass, Less and Compass

More Related Content

Sass, Less and Compass

Editor's Notes