Embed Size (px)
DESCRIPTION
A
Citation preview
JS DAY - VERONA - May 14th 2014
Andrea Verlicchi @verlok www.andreaverlicchi.eu
Agile CSS Development with
/ SASS
About me
• Andrea Verlicchi!
• Front-end architect (also PHP developer)!
• www.andreaverlicchi.eu twitter: @verlok
Let's talk about CSS
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.
CSS can become messy
• Not a unique author!
• Not a unique coding style
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
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 }
CSS is not a complete language
• No variables (yet)!
• No extensibility!
• No math (yet)!
• Just a few functions (rgb, rgba, ...)
What if all this could CHANGE?
What if we could use...
What if we could use...
Variables?Nesting?
Functions? Math?
Partials?
Variables?Nesting?
Functions? Math?
SASS
Sass is the most mature, stable, and powerful professional grade CSS extension language in the
world.!
http://sass-lang.com
HOW IT WORKS - DEV
YOU WRITE SASS / SCSS
IT CREATES CSS
IT WATCHES!FOR CHANGES
HOW IT WORKS - PROD
YOU WRITE SASS / SCSS
COMPILE
IT CREATES CSS
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;
}}
}
!!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
FUNCTIONS
button {color: #CE4DD6;
}!button:hover {
color: #D76DDE;}
button {color: $mainColor;
}!button:hover {
color: saturate($mainColor, 10%);}
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);
}
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;}!……………
SASS 3 does all this (and lots more)
It allows you to do powerful operations!
using Mixins
It allows to choose the output CSS style,
including Compressed
It can remove comments you don't
want to publish
// this is a shameful hack
However, some developers still don't like
it...
...hard to debug?
COMPASS
Compass is an open-source CSS Authoring Framework. Compass uses SASS.!
http://compass-style.org
COMPASS extends SASS + it gives you some interesting features
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
2. IT'S LOADED WITH LOTS OF HELPERS &
PATTERNS
CSS3, Typography, Utilities (Reset, Clearfix), Sticky Footer, and more
You just add the images, it generates the sprite + gives you a
helper to use your images
3. IT MAKES CSS SPRITES
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); }}
#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
Resume
SASS
• Nesting!
• Variables!
• Functions!
• Math!
• Partials
• Easy debugging!
• Easy spriting!
• Lots of helpers
COMPASS
ORGANIZATION
• Better code organization!
• No code repetition (DRY)!
• Shorter files to manage!
• Much speeder coding
HOW TO INSTALL
• Download Ruby rubyinstaller.org!
• Command prompt: gem install compass
• Download Ruby ruby-lang.com!
• Terminal: sudo gem install compass
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
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.
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)
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
twitter: verlok!www.andreaverlicchi.eu
Q&A
@verlok #jsday
