Agile CSS development with Compass and Sass
-
Upload
andrea-verlicchi -
Category
Internet
-
view
684 -
download
0
Transcript of Agile CSS development with Compass and Sass
YOOXlabs ~ 22.09.2015
andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent
Agile CSS Development with Compass / SASS
• Strong addiction tofront-end development
• Front-end Architect
• Occasional speaker
andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
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.scsshtml, 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; border-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; 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;}
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;}
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}
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...
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;}
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 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