Agile CSS development with Compass and Sass

YOOXlabs ~ 22.09.2015
andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent
Agile CSS Development
with Compass / SASS

• Strong addiction to
front-end development
• Front-end Architect
• Occasional speaker
andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent

YOOXlabs Tech Event
Front-End Development
October 2015

Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world.

How it works: locally
FILE .SCSS
FILE .CSS
WATCHGRUNT

How it works: CI
FILE .SCSS
COMPILE
FILE .CSS

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

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

Math
aside {
width: 23.95833%;
}
$width: 960px;
$asideWidth: 230px;
aside {
width: $asideWidth / $width * 100%;
}

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

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

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

Extend
%message {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
@extend %message;
color: red;
border-color: red;
}
.alert {
@extend %message;
color: orange;
}
.error, .alert {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
color: red;
border-color: red;
}
.alert {
color: orange;
}

Mixins
@mixin message {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
@include message;
color: red;
border-color: red;
}
.alert {
@include message;
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;
}

Extend vs Mixins
• CSS length
• Usage with media queries
• Parameters
EXTEND WINS
MIXIN WINS
MIXIN WINS

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

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

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

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

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}

Debug
• source maps
• line comments

SASS
• Variables
• Nesting
• Math
• Partials
• Extend
• Mixins

Compass is an open-source CSS Authoring Framework.
Compass uses SASS.

Thresholds conﬁguration
// 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...

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

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

Animation
.myBox {
@include animation(spin 1s);
}
.myBox {
-moz-animation: spin 1s;
-webkit-animation: spin 1s;
animation: spin 1s;
}

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

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

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

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

Sprite - Advanced
• Box size generation
• Offset inside the box
• Sprite images spacing
• Display density management
• Here’s how: 
andreaverlicchi.eu/yooxlabs-2015-09/

Installation
• Download Ruby 
rubyinstaller.org
• Install Compass
• Download Ruby 
ruby-lang.com
• Install Compass
gem install compasssudo

Configuration
• Activate the project folder
• Create the configuration file
cd path/to/project
compass config --css-dir css

Primi ﬁle SASS
• Convert CSS to SCSS
sass-convert css/main.css --to scss
• Create initial folders and ﬁles
compass install compass
sass-convert css --to scss --recursive

Usage
• Compile
compass compile
• Start the watcher
compass watch

Compass
• Sprite
• Browser thresholds
• Included mixins

• Project organization
• Development speed
• Maintain with ease

Q&A
@verlok ~ #YOOXlabsTechEvent

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/

Agile CSS development with Compass and Sass

More Related Content

What's hot (20)

Similar to Agile CSS development with Compass and Sass (20)

More from Andrea Verlicchi (7)

Recently uploaded (20)

Agile CSS development with Compass and Sass