Scrivere CSS agile con Compass/SASS + debug facile

SASS & COMPASS
CSS with less STRESS

lunedì 5 novembre 2012

CSS can become messy



• Many site sections
• Many page sections
• Many devices
• Many screen resolutions
• Many colors, fonts, helpers, etc.



• Not a unique author
• Not a unique coding style


CSS can become looong


CSS can become looong

• we could split the code into more CSS files,
big, long authoring CSS files
but it would mean more HTTP requests

• not so easy you first look to someone else's code
expecially when
to read and to manage


CSS can be repetitive


CSS can be repetitive

• Rules with same #id + different .class
• Rules with same font, same color in
different sections of the page


CSS is not a complete language


CSS is not a complete language

• No variables
• No extending
• No math
• Few functions (rgb, rgba, ...)


What if all this
could CHANGE?


What if we could use...
NESTING?


NESTING
#header {

#header li { li {
margin-right: 1em; margin-right: 1em;
} }

#header a { a {
color: white; color: white;
background: red; background: red;
display: block; display: block;
}
&:hover {
#header a:hover { color: red;
color: red; background: white;
background: white; }
} }
}


VARIABLES?


VARIABLES
$mainColor: #CE4DD6;

button { button {
background: #CE4DD6; background: $mainColor;
} }

a { a {
color: #CE4DD6; color: $mainColor;
} }

header { header {
border-bottom: 3px; border-bottom: 3px;
border-color: #CE4DD6; border-color: $mainColor;
} }


FUNCTIONS?


FUNCTIONS
button { button {
background: #CE4DD6; background: $mainColor;
} }

button:hover { button:hover {
background: #D76DDE; background: saturate($mainColor, 10%);
} }


What if we could do...
some MATH?


MATH
$width: 960;

#side { #side {
width: 23.95833%; width: 230 / $width;
margin-right: 2.08333%; margin-right: 20 / $width;
} }

#main { #main {
margin-right: 2.08333%; margin-right: 20 / $width;
} }

#more { #more {
} }


PARTIALS?


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?”


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 */
}


SASS

Sass makes CSS fun again. Sass is an extension of CSS3, adding
nested rules, variables, mixins, selector inheritance, and more.


SASS 3 does all this
(and lots more)


It also allows to do more
powerful stuff
(if you love power & complexity)
using Mixins


It also removes comments
we don't want to publish
i.g. "fuck IE"


It also allows to choose the
output CSS style, including
compressed


So why aren't we
using it (yet)?


Because it's hard to debug?


COMPASS

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


COMPASS extends SASS +
gives you some interesting
features


1. IT'S EASY TO DEBUG!



Click on deﬁnition



Get the source ﬁle and line number


(claps)


2. IT'S LOADED WITH LOTS
OF HELPERS & PATTERNS


2. IT'S LOADED WITH LOTS
OF HELPERS & PATTERNS

CSS3,Typography, Utilities, Reset, Grids,
Clearﬁx, Sticky Footer, and more


3. IT MAKES VERY EASY TO
WORK with SPRITES


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


demo


Resume

•Nesting
• Variables
• Functions
• Math
• Partials


Resume

•No more mess
• Shorter ﬁles
• No repetition (DRY)


Resume

•It's used worldwide by the best front-end developers
• It would technically advance our company
• It would empower your professional skills


discussion


That's all!
Thank you for your attention!

@verlok | www.andreaverlicchi.eu


Scrivere CSS agile con Compass/SASS + debug facile

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

More from GGDBologna

More from GGDBologna (20)

Scrivere CSS agile con Compass/SASS + debug facile