scrivere css agile con compass/sass + debug facile

SASS & COMPASSCSS 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

• 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


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 thiscould CHANGE?


What if we could use... NESTING?


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;

}}

}


What if we could use... VARIABLES?


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;

}


What if we could use... FUNCTIONS?


FUNCTIONSbutton {background: #CE4DD6;

}

button:hover {background: #D76DDE;

}

button {background: $mainColor;

}

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

}


What if we could do...some MATH?


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;

}


What if we could use...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.


http://sass-lang.com/#nesting

http://sass-lang.com/#nesting

http://sass-lang.com/#variables

http://sass-lang.com/#variables

http://sass-lang.com/#mixins

http://sass-lang.com/#mixins

http://sass-lang.com/#extend

http://sass-lang.com/#extend

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

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 weusing 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 definition



Get the source file 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, Clearfix, 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 files

•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


http://www.andreaverlicchi.eu

http://www.andreaverlicchi.eu

scrivere css agile con compass/sass + debug facile

Technology