Más contenido relacionado Similar a Sass, Less and Compass (6) Sass, Less and Compass1. Sass 3 e
Less( +Compass )
Un modo differente di scrivere CSS
http://it.linkedin.com/in/robertcasanova
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;
} }
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; }
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
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
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ì!
Notas del editor \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n