Sass, Less and Compass

3,134 views

Published on

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.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,134
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass, Less and Compass

    1. 1. Sass 3 eLess( +Compass ) Un modo differente di scrivere CSS http://it.linkedin.com/in/robertcasanova
    2. 2. SommarioCos’è Sass?Installare SassEsempi Pratici di utilizzoCos’è Less?Principali differenze Less/SassBreve introduzione a CompassConclusioni
    3. 3. Cos’è Sass?http://sass-lang.comCSS 2.0Un modo strutturato e scalabile di scrivere CSS(partials)Coerenza e riutilizzoWrite less, do more!!!
    4. 4. Installare Sass$ gem install sass$ mv style.css style.scss$ sass --watch style.scss:style.css
    5. 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. 6. Nesting 2a{ a{ color: #fff; color: #fff; &:hover { } color: #f3f3f3; a:hover { } color: #f3f3f3; &:active { } color: #eee; a:active { } color: #eee;} }
    7. 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. 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. 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. 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. 11. ..e molto altroarraycicli, controlli if/else@extend (creare classi che estendono altreclassi)@debug, @warn
    12. 12. Output Style$ sass --style nested --watchstyle.scss:style.css$ sass --style expanded --watchstyle.scss:style.css$ sass --style compact --watchstyle.scss:style.css$ sass --style compressed --watchstyle.scss:style.css
    13. 13. Cos’è Less?http://lesscss.org/Stessi costrutti di Sass (+ Namespaces, + JSeval, - extends), sintassi leggermente differente.https://gist.github.com/674726E’ possibile includere un file ‘.less’direttamente nel codice e utilizzare una libreriaJS come interprete.
    14. 14. Modi d’UsoLato Client:<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>Lato Server: con node.jsCompilato da terminale:$lessc styles.less > styles.css
    15. 15. Cos’è Compasshttp://compass-style.org/Un Framework CSS che non “sporca” ilmarkupUna ‘libreria CSS’ basata su Sass (mixins)
    16. 16. Perchè usare Compass?Non usa classi ‘ad hoc’ sul markupTi aiuta nella scrittura di CSS3Facilita il riutilizzo e puoi usarlo per creare untuo Framework personale di lavoroSe usavi Blueprint, puoi caricare il moduloBlueprint e utilizzarlo dentro Sass
    17. 17. Un esempiohttp://compass-style.org/examples/compass/layout/stretching/
    18. 18. Conclusioni
    19. 19. Conclusioni Ma qual’è il punto di arrivo?Perchè studiare un framework CSS? E’ davvero necessario?
    20. 20. Conclusioni Ma qual’è il punto di arrivo?Perchè studiare un framework CSS? E’ davvero necessario?
    21. 21. Conclusioni Ma qual’è il punto di arrivo?Perchè studiare un framework CSS? E’ davvero necessario? Forse sì!
    22. 22. Responsive Designhttp://thesassway.com/intermediate/responsive-web-design-part-1

    ×