Agile CSS development with Compass and Sass
3 likes1,236 views
The document provides an overview of Sass and Compass for agile CSS development. It discusses features of Sass like variables, nesting, mixins, extends and partials. It also covers how Compass, which is built on Sass, provides additional features like sprites, browser prefixes, gradients and animations through mixins. The presentation demonstrates how Sass and Compass can be used to write more maintainable and reusable CSS through these features and tools. It also provides instructions on installing and using Sass, Compass and configuring projects for development.
Agile CSS development with Compass and Sass
- 1. YOOXlabs ~ 22.09.2015 andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent Agile CSS Development with Compass / SASS
- 2. • Strong addiction to front-end development • Front-end Architect • Occasional speaker andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent
- 3. YOOXlabs Tech Event Front-End Development October 2015
- 5. Language
- 6. Repetitive
- 7. Length
- 8. Mess?
- 9. Maintenance
- 10. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
- 11. How it works: locally FILE .SCSS FILE .CSS WATCHGRUNT
- 12. How it works: CI FILE .SCSS COMPILE FILE .CSS
- 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; } Variables
- 14. Nesting 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. Math aside { width: 23.95833%; } $width: 960px; $asideWidth: 230px; aside { width: $asideWidth / $width * 100%; }
- 16. Partials @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. Helpers 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. 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. 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. Mixins @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. Extend vs Mixins • CSS length • Usage with media queries • Parameters EXTEND WINS MIXIN WINS MIXIN WINS
- 22. Mixins @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. Output style • 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. Output style • 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. Output style • 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. Output style • 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. Debug • source maps • line comments
- 28. SASS • Variables • Nesting • Math • Partials • Extend • Mixins
- 29. Compass is an open-source CSS Authoring Framework. Compass uses SASS.
- 31. Thresholds configuration // 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...
- 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. 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. Animation .myBox { @include animation(spin 1s); } .myBox { -moz-animation: spin 1s; -webkit-animation: spin 1s; animation: spin 1s; }
- 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; }
- 38. Sprites
- 39. Sprites - All @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. Sprite - Single @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. Sprite - Advanced • Box size generation • Offset inside the box • Sprite images spacing • Display density management • Here’s how: andreaverlicchi.eu/yooxlabs-2015-09/
- 42. Installation • Download Ruby rubyinstaller.org • Install Compass • Download Ruby ruby-lang.com • Install Compass gem install compasssudo
- 43. Configuration • Activate the project folder • Create the configuration file cd path/to/project compass config --css-dir css
- 44. Primi file SASS • Convert CSS to SCSS sass-convert css/main.css --to scss • Create initial folders and files compass install compass sass-convert css --to scss --recursive
- 45. Usage • Compile compass compile • Start the watcher compass watch
- 46. Compass • Sprite • Browser thresholds • Included mixins
- 47. • Project organization • Development speed • Maintain with ease
- 50. SASS vs LESS @verlok ~ #YOOXlabsTechEvent https://css-tricks.com/sass-vs-less/ http://www.zingdesign.com/less-vs-sass-its-time-to- switch-to-sass/