Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza

1,963 views

Published on

Queste sono le slide della presentazione "Sviluppo CSS Agile con Compass (SASS)" che si è tenuta al #CSSDay a Faenza (RA) il 27 marzo 2015.

Published in: Technology

Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza

  1. 1. CSS DAY ~ 27.03.2015 www.andreaverlicchi.eu ~ @verlok Sviluppo CSS agile con SASS e Compass
  2. 2. • Grave dipendenza da sviluppo front-end • Front-end Architect • Speaker occasionale www.andreaverlicchi.eu ~ @verlok
  3. 3. Linguaggio?
  4. 4. Ripetitività
  5. 5. Lunghezza
  6. 6. Disordine?
  7. 7. Manutenzione
  8. 8. Sass è il più maturo, stabile, potente 
 linguaggio di estensione CSS nel mondo.
  9. 9. Come funziona: locale FILE .SCSS FILE .CSS WATCH
  10. 10. Come funziona: locale FILE .SCSS FILE .CSS WATCHGRUNT
  11. 11. Come funziona: CI FILE .SCSS COMPILE FILE .CSS
  12. 12. Come funziona - CI FILE .SCSS COMPILE FILE .CSS FILE .JS MINIFY FILE .MIN.JS
  13. 13. button { background: #ABCDEF; } a { color: #ABCDEF; } header { border-bottom: 5px; border-color: #ABCDEF; } $mainColor: #ABCDEF; button { background: $mainColor; } a { color: $mainColor; } header { border-bottom: 5px; border-color: $mainColor; } Variabili
  14. 14. Annidamento article h1 { margin-right: 1em; } article a { color: white; background: red; display: block; } article a:hover { color: red; background: white; } article { h1 { margin-right: 1em; } a { color: white; background: red; display: block; &:hover { color: red; background: white; } } }
  15. 15. Operazioni aside { width: 23.95833%; } $width: 960px; $asideWidth: 230px; aside { width: $asideWidth / $width * 100%; }
  16. 16. Parziali @import “_variables”; @import "_reset"; @import "_fonts"; @import "_headerFooter"; @import "_forms"; @import "_base"; @import "_helpers"; @import “_whatever”; … main.scss main.css // _reset.scss html, body, div, span, h1, h2, h3, h4, h5, h6 … { margin: 0; padding: 0; … } // … // _fonts.scss @font-face { font-family: myFont; //… } // … // … // _whatever.scss
  17. 17. Helper button:hover { background-color:
 #A6CDF4; } button.disabled { background-color:
 #C4CDD6; } $buttonColor: #ABCDEF; button:hover { background-color: 
 adjust-saturation($buttonColor, 10%); } button.disabled { background-color: 
 adjust-saturation($buttonColor, -10%); }
  18. 18. Extend .message { font-weight: bold; padding: 1em; border-width: 2px; } .error { @extend .message; color: red; border-color: red; } .alert { @extend .message; color: orange; border-color: orange; } .message, .error, .alert { font-weight: bold; padding: 1em; border-width: 2px; } .error { color: red; border-color: red; } .alert { color: orange; border-color: orange; }
  19. 19. Extend %message { font-weight: bold; padding: 1em; border-width: 2px; } .error { @extend %message; color: red; border-color: red; } .alert { @extend %message; color: orange; border-color: orange; } .error, .alert { font-weight: bold; padding: 1em; border-width: 2px; } .error { color: red; border-color: red; } .alert { color: orange; border-color: orange; }
  20. 20. Mixin @mixin message { font-weight: bold; padding: 1em; border-width: 2px; } .error { @include message; color: red; border-color: red; } .alert { @include message; color: orange; border-color: orange; } .error { font-weight: bold; padding: 1em; border-width: 2px; color: red; border-color: red; } .alert { font-weight: bold; padding: 1em; border-width: 2px; color: orange; border-color: orange; }
  21. 21. Extend vs Mixin • Lunghezza CSS • Utilizzo con media query • Parametri EXTEND WINS MIXIN WINS MIXIN WINS
  22. 22. Mixin @mixin opacity($opacity) { opacity: $opacity; filter: alpha(opacity=$opacity*100); } .faded-text { @include opacity(0.8); } .faded-text { opacity: 0.8; filter: alpha(opacity=80); }
  23. 23. Stile di output • nested .widget-social { text-align: right; } .widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; } .widget-social a:hover { color: #B00909; }
  24. 24. Stile di output • nested • expanded .widget-social { text-align: right; } .widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; } .widget-social a:hover { color: #B00909; }
  25. 25. Stile di output • nested • expanded • compact .widget-social { text-align: right; } .widget-social a, .widget-social a:visited { padding: 0 3px; … } .widget-social a:hover { color: #B00909; }
  26. 26. Stile di output • nested • expanded • compact • compressed .widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222}.widget-social a:hover{co lor:#B00909}
  27. 27. Debug • source maps • commenti di riferimento
  28. 28. SASS • Variabili • Annidamento • Operazioni • Parziali • Extend • Mixin
  29. 29. Compass è un framework open-source per la scrittura di CSS. Compass usa SASS.
  30. 30. Soglie browser
  31. 31. Configurazione soglie // Dichiarare prima di @import-are compass $graceful-usage-threshold: 5; // def: 0.1 $critical-usage-threshold: 1; // def: 0.01 @import "compass/css3"; // Tutto il resto a seguire...
  32. 32. 251 mixin inclusi
  33. 33. Background & Gradients .myBox { @include background(linear-gradient(to bottom, #F00, #0F0)); } .myBox { // ... background: -moz-linear-gradient(top, #ff0000, #00ff00); background: -webkit-linear-gradient(top, #ff0000, #00ff00); background: linear-gradient(to bottom, #ff0000, #00ff00); }
  34. 34. Keyframes @include keyframes(spin) { from { transform: rotate(0); } to { transform: rotate(360deg); } } @-moz-keyframes spin { ... } @-webkit-keyframes spin { ... } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  35. 35. Animation .myBox { @include animation(spin 1s); } .myBox { -moz-animation: spin 1s; -webkit-animation: spin 1s; animation: spin 1s; }
  36. 36. Flexbox .parent { @include display-flex; @include flex-wrap(wrap); } .child { @include flex-grow(1); } .parent { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .child { -webkit-flex-grow: 1; flex-grow: 1; }
  37. 37. http://compass-style.org/index/mixins
  38. 38. Sprite
  39. 39. Sprite - Tutte @import “compass/utilities/sprites"; @import "flags/*.png"; @include all-flags-sprites; .flags-it, .flags-de, .flags-fr { background: url('/images/flags-s34fe0604ab.png') no-repeat; } .flags-it { background-position: 0 0; } .flags-de { background-position: 0 -32px; } .flags-fr { background-position: 0 -64px; } // flags // it.png // de.png // fr.png
  40. 40. Sprite - Singola @import "compass/utilities/sprites"; @import "flags/*.png"; // it.png // de.png .myBox { @include flags-sprite(it); } .anotherBox { @include flags-sprite(de); } .myBox, .anotherBox { background: url('../img/flags- s69e070e3f8.png') no-repeat; } .myBox { background-position: 0 0; } .anotherBox { background-position: 0 -32px; }
  41. 41. Sprite - Avanzato • Generazione dimensioni box • Offset dentro box • Spaziatura immagini sprite • Gestione densità display • Ecco come: andreaverlicchi.eu/css-day-2015
  42. 42. Installazione • Download Ruby
 rubyinstaller.org • Install Compass • Download Ruby
 ruby-lang.com • Install Compass gem install compasssudo
  43. 43. Configurazione • Attivare la cartella del progetto • Creare file di configurazione cd path/to/project compass config --css-dir css
  44. 44. Primi file SASS • Conversione CSS a SCSS sass-convert css/main.css --to scss • Creare cartelle e file iniziali compass install compass sass-convert css --to scss --recursive
  45. 45. Utilizzo • Compilare una tantum compass compile • Avviare il watcher compass watch
  46. 46. Compass • Sprite • Soglie browser • Mixins inclusi
  47. 47. Un’ultima cosa…
  48. 48. csszengarden.com
  49. 49. Comportamento PresentazioneContenuto
  50. 50. Contenuto Presentazione Comportamento JS CSSHTML
  51. 51. <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled> .btn { padding: 0.5em; border: none; background: darkred; color: white; } .btn-large { padding: 1em; font-size: 16px; } .btn-small { padding: 0.2em; font-size: 12px; } .btn-grey { background: darkgrey; } CSSHTML
  52. 52. .btn { padding: 0.5em; border: none; background: darkred; color: white; } .btn-large { padding: 1em; font-size: 16px; } .btn-small { padding: 0.2em; font-size: 12px; } .btn-grey { background: darkgrey; } CSS @mixin btn { padding: 0.5em; border: none; background: darkred; color: white; } @mixin btn-large { padding: 1em; font-size: 16px; } @mixin btn-small { padding: 0.2em; font-size: 12px; } @mixin btn-grey { background: darkgrey; } SASS
  53. 53. .btn { padding: 0.5em; border: none; background: darkred; color: white; } .btn-large { padding: 1em; font-size: 16px; } .btn-small { padding: 0.2em; font-size: 12px; } .btn-grey { background: darkgrey; } CSS @mixin btn { padding: 0.5em; border: none; background: darkred; color: white; } @mixin btn-large { padding: 1em; font-size: 16px; } @mixin btn-small { padding: 0.2em; font-size: 12px; } @mixin btn-grey { background: darkgrey; } SASS
  54. 54. @mixin btn { padding: 0.5em; border: none; background: darkred; color: white; } @mixin btn-large { padding: 1em; font-size: 16px; } @mixin btn-small { padding: 0.2em; font-size: 12px; } @mixin btn-grey { background: darkgrey; } SASSHTML <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled>
  55. 55. @mixin btn { padding: 0.5em; border: none; background: darkred; color: white; } @mixin btn-large { padding: 1em; font-size: 16px; } @mixin btn-small { padding: 0.2em; font-size: 12px; } @mixin btn-grey { background: darkgrey; } SASSHTML <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled> <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled>
  56. 56. @mixin btn { padding: 0.5em; border: none; background: darkred; color: white; } @mixin btn-large { padding: 1em; font-size: 16px; } @mixin btn-small { padding: 0.2em; font-size: 12px; } @mixin btn-grey { background: darkgrey; } button { @include btn; } button[type=“submit”] { @include btn; @include btn-large; } button[type=“reset”] { @include btn; @include btn-small; } button[disabled] { @include btn; @include btn-grey; } SASSHTML <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled> <button class=“btn btn-large”
 type=“submit”> <button class=“btn btn-small” type=“reset”> <button class=“btn btn-grey” disabled>
  57. 57. DOM leggero <ul id=“menu-top-navigation" class="nav navbar-nav"> <li class=“menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-183 current_page_item active menu-item-188”> ... </li> </ul> <ul id=“menu-top-navigation"> <li class=“active”> ... </li> </ul>
  58. 58. Markup • Classi semantiche, non presentazionali • Classi presentazionali → Mixin
  59. 59. • Più ordine • Più agilità • Facilità di manutenzione
  60. 60. Q&A
  61. 61. SASS vs LESS @verlok #cssday https://css-tricks.com/sass-vs-less/ http://www.zingdesign.com/less-vs-sass-its-time-to- switch-to-sass/
  62. 62. Bootstrap (sostantivo): una libreria applicata ad un sito quando lo sviluppatore front-end ha perso la passione per il suo lavoro @verlok #cssday “1186 regole CSS (91%) non sono utilizzate dalla pagina corrente”
  63. 63. OOCSS: Obstinate Overuse 
 of Classes in Style Sheets @verlok #cssday “OOCSS is about pure CSS.Agreed. 
 But it’s about shitty HTML” @g16n

×