agile css development with compass/sass
DESCRIPTION
ATRANSCRIPT
![Page 1: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/1.jpg)
JS DAY - VERONA - May 14th 2014
Andrea Verlicchi @verlok www.andreaverlicchi.eu
Agile CSS Development with
/ SASS
![Page 2: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/2.jpg)
About me
• Andrea Verlicchi!
• Front-end architect (also PHP developer)!
• www.andreaverlicchi.eu twitter: @verlok
![Page 3: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/3.jpg)
Let's talk about CSS
![Page 4: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/4.jpg)
CSS can become messy
• Many site sectionshome, landings, products, etc.!
• Many page sectionsheader, footer, main, etc.!
• Many devicesdesktop, tablet, smartphone, etc.!
• Many screen resolutions!
• Many colors, fonts, helpers, etc.
![Page 5: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/5.jpg)
CSS can become messy
• Not a unique author!
• Not a unique coding style
![Page 6: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/6.jpg)
CSS can become looong
• long CSS file vs split CSS file we could split the code into more CSS files, but it would result in less performing websites (more HTTP requests)!
• long CSS file vs code readability code is less readable if files are very long, especially when you first look to someone else's code
![Page 7: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/7.jpg)
CSS can be repetitive
• Sandboxed rules!
article header {...} article h1 {...} article p {...} article footer {...} article .author {...}!
• Rules that share styles!
button { background-color: #BADA55 } a { color: #BADA55 } body { border-bottom: 5px solid #BADA55 }
![Page 8: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/8.jpg)
CSS is not a complete language
• No variables (yet)!
• No extensibility!
• No math (yet)!
• Just a few functions (rgb, rgba, ...)
![Page 9: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/9.jpg)
What if all this could CHANGE?
![Page 10: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/10.jpg)
What if we could use...
![Page 11: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/11.jpg)
What if we could use...
Variables?Nesting?
Functions? Math?
![Page 12: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/12.jpg)
Partials?
Variables?Nesting?
Functions? Math?
![Page 13: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/13.jpg)
SASS
Sass is the most mature, stable, and powerful professional grade CSS extension language in the
world.!
http://sass-lang.com
![Page 14: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/14.jpg)
HOW IT WORKS - DEV
YOU WRITE SASS / SCSS
IT CREATES CSS
IT WATCHES!FOR CHANGES
![Page 15: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/15.jpg)
HOW IT WORKS - PROD
YOU WRITE SASS / SCSS
COMPILE
IT CREATES CSS
![Page 16: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/16.jpg)
NESTING!!article li {margin-right: 1em;
}!article a {color: white;background: red;display: block;
}!article a:hover {color: red;background: white;
}
article {!li {margin-right: 1em;
}!a {color: white;background: red;display: block;!&:hover {color: red;background: white;
}}
}
![Page 17: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/17.jpg)
!!button {
background: #CE4DD6;}!a {
color: #CE4DD6;}!header {
border-bottom: 3px;border-color: #CE4DD6;
}
$mainColor: #CE4DD6;!button {
background: $mainColor;}!a {
color: $mainColor;}!header {
border-bottom: 3px;border-color: $mainColor;
}
VARIABLES
![Page 18: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/18.jpg)
FUNCTIONS
button {color: #CE4DD6;
}!button:hover {
color: #D76DDE;}
button {color: $mainColor;
}!button:hover {
color: saturate($mainColor, 10%);}
![Page 19: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/19.jpg)
MATH!!#side {width: 23.95833%;margin: 2.08333%;
}!#main {width: 47.91667%;margin: 2.08333%;
}!#more {width: 23.95833%;
}
$width: 960px;!#side {width: percentage(230px / $width);margin: percentage(10px / $width);
}!#main {width: percentage(460px / $width);margin: percentage(10px / $width);
}!#more {width: percentage(230px / $width);
}
![Page 20: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/20.jpg)
PARTIALS
// === site.scss ===!@import "normalize";@import "fonts";@import "mixins"; @import "headerFooter";@import "helpers";@import "forms";………@import "whatever";
(very long CSS file) !html {line-height:1;}!ol,ul {list-style:none;}!table {border-collapse:collapse;border-spacing:0;}!caption,th,td {text-align:left;font-weight:400;vertical-align:middle;}!q,blockquote {quotes:none;}!q:before,q:after,blockquote:before,blockquote:after {content:none;}!a img {border:none;}!body {font-family:Tahoma, sans-serif;font-size:87.5%;-webkit-text-size-adjust:none;}!h1,h2,h3,h4,h5,h6,#payoff {line-height:1.5em;}!p {margin-bottom:6px;line-height:1.5em;}!abbr,acronym {border-bottom:1px dotted #690;cursor:help;}!#language,#loginMessage {position:absolute;}!#content {position:relative;}!#accountZone {display:none;float:right;border-radius:10px;}!#accountZone li {display:block;float:left;}!#accountZone a {display:block;padding:8px 10px;}!#accountZone form,#accountZone #regeneratePwd {float:left;}!#loginForm form {padding:6px 10px 5px;}!#loginForm button {font-size:91.66667%;border:0;background:#eee;height:18px;text-align:center;width:auto;box-shadow:inset 0 -2px 5px rgba(0,0,0,0.3);margin:0;}!#loginForm input {width:76px;height:18px;border:none;font-size:100%;outline:none;box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);padding:0 2px;}!……………
![Page 21: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/21.jpg)
SASS 3 does all this (and lots more)
![Page 22: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/22.jpg)
It allows you to do powerful operations!
using Mixins
![Page 23: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/23.jpg)
It allows to choose the output CSS style,
including Compressed
![Page 24: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/24.jpg)
It can remove comments you don't
want to publish
// this is a shameful hack
![Page 25: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/25.jpg)
However, some developers still don't like
it...
![Page 26: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/26.jpg)
...hard to debug?
![Page 27: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/27.jpg)
COMPASS
Compass is an open-source CSS Authoring Framework. Compass uses SASS.!
http://compass-style.org
![Page 28: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/28.jpg)
COMPASS extends SASS + it gives you some interesting features
![Page 29: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/29.jpg)
Click on the file name:line to view the CSS file inspector
to get the original SASS/SCSS file name and line
1. IT'S EASY TO DEBUG!
Inspect the element you want to debug
to get the CSS rules in the inspector
![Page 30: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/30.jpg)
2. IT'S LOADED WITH LOTS OF HELPERS &
PATTERNS
CSS3, Typography, Utilities (Reset, Clearfix), Sticky Footer, and more
![Page 31: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/31.jpg)
You just add the images, it generates the sprite + gives you a
helper to use your images
3. IT MAKES CSS SPRITES
![Page 32: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/32.jpg)
3. IT MAKES CSS SPRITES
@import "compass/utilities/sprites";!@import “sponsors/*.png”; // windowsAzure.png, appDynamics.png …!#sponsor_section { .sponsor1 { @include sponsors-sprite(windowsAzure, true); }! .sponsor2 { @include sponsors-sprite(appDynamics, true); }}
![Page 33: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/33.jpg)
#sponsor_section .sponsor1,#sponsor_section .sponsor2,#sponsor_section .sponsor3 { background: url('../img/sponsors-s69e070e3f8.png') no-repeat;}!#sponsor_section .sponsor1 { background-position: 0 0; height: 171px; width: 457px;}!#sponsor_section .sponsor2 { background-position: 0 -356px; height: 95px; width: 373px;}
3. IT MAKES CSS SPRITES
![Page 34: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/34.jpg)
Resume
![Page 35: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/35.jpg)
SASS
• Nesting!
• Variables!
• Functions!
• Math!
• Partials
![Page 36: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/36.jpg)
• Easy debugging!
• Easy spriting!
• Lots of helpers
COMPASS
![Page 37: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/37.jpg)
ORGANIZATION
• Better code organization!
• No code repetition (DRY)!
• Shorter files to manage!
• Much speeder coding
![Page 38: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/38.jpg)
HOW TO INSTALL
• Download Ruby rubyinstaller.org!
• Command prompt: gem install compass
• Download Ruby ruby-lang.com!
• Terminal: sudo gem install compass
![Page 39: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/39.jpg)
HOW TO SETUP
• in terminal / command promptgo to your project foldercd {your/project/path}!
• create the scaffolding compass install compass!
• start watching changes / creating CSScompass watch
![Page 40: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/40.jpg)
HOW TO START
• SCSS format is CSS compliant!
• You can start writing SCSS as if you were writing CSS / Rename your CSS files in SCSS!
• Start using variables and nesting!
• Organize your CSS code in partials!
• Do more complex things using mixins, etc.
![Page 41: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/41.jpg)
SOME ADVICE
• Keep in mind that you’re still writing CSS, always figure how your CSS will become!
• Avoid unnecessary nesting (a maximum of 3 levels is often enough)!
• In continuous integration environments, always run compass clean before compass compile (especially if you use branches)
![Page 42: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/42.jpg)
GIVE IT A TRY !
• It takes no more than 30 minutes to be installed and learned!
• It's used by more and more front-end developers and companies!
• It would improve your technical skills
![Page 43: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/43.jpg)
twitter: verlok!www.andreaverlicchi.eu
![Page 44: Agile css development with Compass/SASS](https://reader036.vdocuments.net/reader036/viewer/2022081401/5584f31dd8b42a30708b4e55/html5/thumbnails/44.jpg)
Q&A
@verlok #jsday