Agile CSS development with Compass and Sass - YOOXlabs Tech Event in Zola Predosa

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.

30. Browser thresholds

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...

32. 251 included mixing

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;
}

37. http://compass-style.org/index/mixins

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

49. Q&A
@verlok ~ #YOOXlabsTechEvent

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/