Your SlideShare is downloading. ×
Sass, Less and Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sass, Less and Compass

2,318
views

Published on

Sass e Less sono due Framework CSS. …

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,318
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Sass 3 eLess( +Compass ) Un modo differente di scrivere CSS http://it.linkedin.com/in/robertcasanova
    • 2. SommarioCos’è Sass?Installare SassEsempi Pratici di utilizzoCos’è Less?Principali differenze Less/SassBreve introduzione a CompassConclusioni
    • 3. Cos’è Sass?http://sass-lang.comCSS 2.0Un modo strutturato e scalabile di scrivere CSS(partials)Coerenza e riutilizzoWrite 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 2a{ 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 altroarraycicli, controlli if/else@extend (creare classi che estendono altreclassi)@debug, @warn
    • 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. 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. 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. Cos’è Compasshttp://compass-style.org/Un Framework CSS che non “sporca” ilmarkupUna ‘libreria CSS’ basata su Sass (mixins)
    • 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. Un esempiohttp://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 Designhttp://thesassway.com/intermediate/responsive-web-design-part-1

    ×