Upload
ggdbologna
View
468
Download
2
Embed Size (px)
DESCRIPTION
Citation preview
SASS & COMPASSCSS with less STRESS
lunedì 5 novembre 2012
CSS can become messy
lunedì 5 novembre 2012
CSS can become messy
•Many site sections
•Many page sections
•Many devices
•Many screen resolutions
•Many colors, fonts, helpers, etc.
lunedì 5 novembre 2012
CSS can become messy
•Not a unique author
•Not a unique coding style
lunedì 5 novembre 2012
CSS can become looong
lunedì 5 novembre 2012
CSS can become looong
• big, long authoring CSS fileswe could split the code into more CSS files,but it would mean more HTTP requests
• not so easy to read and to manageexpecially when you first look to someone else's code
lunedì 5 novembre 2012
CSS can be repetitive
lunedì 5 novembre 2012
CSS can be repetitive
• Rules with same #id + different .class
• Rules with same font, same color in different sections of the page
lunedì 5 novembre 2012
CSS is not a complete language
lunedì 5 novembre 2012
CSS is not a complete language
•No variables
•No extending
•No math
• Few functions (rgb, rgba, ...)
lunedì 5 novembre 2012
What if all thiscould CHANGE?
lunedì 5 novembre 2012
What if we could use... NESTING?
lunedì 5 novembre 2012
NESTING
#header li {margin-right: 1em;
}
#header a {color: white;background: red;display: block;
}
#header a:hover {color: red;background: white;
}
#header {
li {margin-right: 1em;
}
a {color: white;background: red;display: block;
&:hover {color: red;background: white;
}}
}
lunedì 5 novembre 2012
What if we could use... VARIABLES?
lunedì 5 novembre 2012
VARIABLES
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;
}
lunedì 5 novembre 2012
What if we could use... FUNCTIONS?
lunedì 5 novembre 2012
FUNCTIONSbutton {background: #CE4DD6;
}
button:hover {background: #D76DDE;
}
button {background: $mainColor;
}
button:hover {background: saturate($mainColor, 10%);
}
lunedì 5 novembre 2012
What if we could do...some MATH?
lunedì 5 novembre 2012
MATH
#side {width: 23.95833%;margin-right: 2.08333%;
}
#main {width: 47.91667%;margin-right: 2.08333%;
}
#more {width: 23.95833%;
}
$width: 960;
#side {width: 230 / $width;margin-right: 20 / $width;
}
#main {width: 460 / $width;margin-right: 20 / $width;
}
#more {width: 230 / $width;
}
lunedì 5 novembre 2012
What if we could use...PARTIALS?
lunedì 5 novembre 2012
PARTIALS
“Could you please explain your strategy for building CSS?How do you start and what does the structure of your style sheet look like?
How do you structure your code?”
lunedì 5 novembre 2012
PARTIALS@import "reset"; /* _reset.scss */@import "mixins"; /* _mixins.scss */@import "base"; /* _base.scss */
@media only screen and (min-width: 481px) { @import "481up"; /* _481up.scss */}
@media only screen and (min-width: 768px) { @import "grid"; @import "768up"; /* _768up.scss */}
@media print { @import "print"; /* _print.scss */}
lunedì 5 novembre 2012
lunedì 5 novembre 2012
SASS
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
lunedì 5 novembre 2012
SASS 3 does all this(and lots more)
lunedì 5 novembre 2012
It also allows to do more powerful stuff
(if you love power & complexity)
using Mixins
lunedì 5 novembre 2012
It also removes comments we don't want to publish
i.g. "fuck IE"
lunedì 5 novembre 2012
It also allows to choose the output CSS style, including
compressed
lunedì 5 novembre 2012
So why aren't weusing it (yet)?
lunedì 5 novembre 2012
Because it's hard to debug?
lunedì 5 novembre 2012
lunedì 5 novembre 2012
COMPASS
Compass is an open-source CSS Authoring Framework. Compass uses SASS.
lunedì 5 novembre 2012
COMPASS extends SASS + gives you some interesting
features
lunedì 5 novembre 2012
1. IT'S EASY TO DEBUG!
lunedì 5 novembre 2012
Click on definition
1. IT'S EASY TO DEBUG!
lunedì 5 novembre 2012
Get the source file and line number
1. IT'S EASY TO DEBUG!
lunedì 5 novembre 2012
(claps)
lunedì 5 novembre 2012
2. IT'S LOADED WITH LOTS OF HELPERS & PATTERNS
lunedì 5 novembre 2012
2. IT'S LOADED WITH LOTS OF HELPERS & PATTERNS
CSS3, Typography, Utilities, Reset, Grids, Clearfix, Sticky Footer, and more
lunedì 5 novembre 2012
3. IT MAKES VERY EASY TO WORK with SPRITES
lunedì 5 novembre 2012
3. IT MAKES VERY EASY TO WORK with SPRITES
You just add the images, it generates the sprite + gives you a helper to use your
images
lunedì 5 novembre 2012
demo
lunedì 5 novembre 2012
Resume
•Nesting
• Variables
• Functions
•Math
• Partials
lunedì 5 novembre 2012
Resume
•No more mess
• Shorter files
•No repetition (DRY)
lunedì 5 novembre 2012
Resume
• It's used worldwide by the best front-end developers
• It would technically advance our company
• It would empower your professional skills
lunedì 5 novembre 2012
discussion
lunedì 5 novembre 2012
That's all!Thank you for your attention!
@verlok | www.andreaverlicchi.eu
lunedì 5 novembre 2012