Slides from talk I gave at PyWeb-IL #22, 27 Dec 2010.

1. Intro to CSS Extenders:
SASS
LESS
Bonus: Compass Framework
PyWeb-IL #22 / 27 Dec 2010 http://flic.kr/p/768ooD

2. This frontend dude maintains…
a production site with lots of CSS
a heavy drinking habit
a growing hatred for humanity
http://flic.kr/p/5cCATU

3. CSS can be annoying.
Here are some workarounds
that might make you
SMILE

4. CSS ANNOYANCES
variables
class mixins
rule nesting
math

5. CSS Extenders
CSS Preprocessors is a crappy name.

6. srsly? at pyweb?
(please don’t shoot me)

7. SASS LESS
sass-lang.com lesscss.org

8. CleverCSS
very similar • not as mature • not actively developed

10. variables variables
class mixins class mixins
rule nesting rule nesting
math math

11. DSL is for
losers.
CleverCSS SASS LESS
DSL CSS Superset

12. Yeah, um,
what he said…
CleverCSS SASS LESS
(.scss)
DSL CSS Superset

13. INSTALLING

14. gem install haml gem install less
.scss .less
DSL: .sass

15. VARIABLES & OPERATIONS

16. $mycolor: #ddeeff; @mycolor: #ddeeff;
$myborder: 3px; @myborder: 3px;
#mynav { #mynav {
background-color: $mycolor; background-color: @mycolor;
color: $mycolor + #111; color: @mycolor + #111;
} }
.hasborder { .hasborder {
border: $myborder solid black; border: @myborder solid black;
padding: $myborder * 4; padding: @myborder * 4;
} }

17. Basic Color Math Basic Color Math
$mycolor + #111 @mycolor + #111
Fancy color functions
lighten($mycolor, 20%)
Advantage: SASS

18. MIXINS

19. @mixin sidebar { .sidebar {
font-size: 14px; font-size: 14px;
background-color: #ddd; background-color: #ddd;
width: 100px; width: 100px
} }
.sidebar_right { .sidebar_right {
@include sidebar; .sidebar;
float: right; float: right;
} }
.sidebar_left { .sidebar_left {
@include sidebar; .sidebar;
float: left; float: left;
} }

20. @mixin sidebar($width: 100px) { .sidebar(@width: 100px) {
font-size: 14px; font-size: 14px;
background-color: #ddd; background-color: #ddd;
width: $width; width: @width;
} }
.sidebar_right { .sidebar_right {
@include sidebar; .sidebar;
float: right; float: right;
} }
.sidebar_right_wide { .sidebar_right_wide {
@include sidebar(150px); .sidebar(150px);
float: right; float: right;
} }

21. NESTED RULES

22. #header {
color: green;
}
#header a {
text-decoration: none;
color: red;
}

23. #header
#header a
#header ul
#header ul li
#header ul li strong
#content a
#content ul
…
#FML

24. #header { #header {
color: green; color: green;
a{ a{
text-decoration: none; text-decoration: none;
color: red; color: red;
} }
a.special { a.special {
font-weight: bold; font-weight: bold;
color: blue; color: blue;
} }
} }

25. #header {
color: green;
border: {
width: 1px;
color: black;
style: solid;
}
}
?

26. INHERITANCE

27. .error {
color: red;
}
.error.severe {
@extend .error;
font-weight: bold;
}
?

28. INCLUDES

29. /* _mysnippet.scss */ /* mysnippet.less */
… …
/* style.scss */ /* style.less */
@import “mysnippet” @import “mysnippet”

30. Rope!
enough for you to hang yourself with.

31. USAGE & DEPLOYMENT

32. sass style.scss:style.css lessc style.less
sass srcdir/sass:srcdir/css

33. sass style.scss:style.css lessc style.less
sass srcdir/sass:srcdir/css
sass --watch style.scss:style.css lessc style.less --watch
sass --watch srcdir/sass:srcdir/css

34. More functionality Less functionality
More documentation Less documentation
Took ideas from LESS Took ideas from SASS
Core is the same Core is the same

35. More functionality Less functionality
More documentation Less documentation
Took ideas from LESS Took ideas from SASS
Core is the same Core is the same

36. A CSS Authoring Framework
based on SASS
http://compass-style.org
but really, you should see
http://beta.compass-style.org

37. Like Django for CSS
extensible, best-practice implementations
that you don’t need to reinvent

38. Installing
gem install compass
compass create /path/to/project

39. _BASE.SCSS
$brand_color: #acd29f;
$base_font_size: 16px;
@import “compass/reset”;
@import “compass/utilities”;
…

40. MYAPP.CSS
@import “base”;
/* your sassy styles go here. */

41. DEJA VU?
{% extends “base.html” %}
<!-- your markup goes here. -->

42. END PRESENTATIONAL MARKUP
<body id=“blog-detail”>
<article class=“wrap”>
<header class=“grid-12”>…</header>
<div class=“grid-8” id=“content”>…</div>
<aside class=“grid-4” id>…</aside>
<footer class=“grid-12”>…</footer>
</article>
</body>

43. END PRESENTATIONAL MARKUP
@import “blueprint”
@mixin two-column {
/* two-col layout on a 12-col grid */
article {
@include container;
header, footer { @include column(12); }
aside { @include column(4); }
.content { @include column(8); }
}
}
body#blog-detail,
body#blog-list { @include two-column; }

44. END PRESENTATIONAL MARKUP
<body id=“blog-detail”>
<article class=“wrap”>
<header class=“grid-12”>…</header>
<div class=“grid-8” id=“content”>…</div>
<aside class=“grid-4” id>…</aside>
<footer class=“grid-12”>…</footer>
</article>
</body>
<body id=“blog-detail”>
<article>
<header>…</header>
<div id=“content”>…</div>
<aside>…</aside>
<footer>…</footer>
</article>
</body>

45. COST: LARGER CSS
Generated CSS
body#blog-detail article { /* wrap styles copied here */ }
body#blog-detail article header,
body#blog-detail article footer { /* grid-12 styles copied here */}
body #blog-detail article aside { /* grid-4 styles copied here */ }

46. VENDOR PREFIX HELL
@import “compass/css3”
.alert {
background-color: red;
@include border-radius(4px)
}

47. VENDOR PREFIX HELL
.alert {
background-color: red;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}

48. SAME POWERFUL TECHNIQUES,
NEW LOW PRICE
cross-browser hacks and fixes
shortcuts around verbose CSS
pre-baked layout (ex: sticky footer)
spriting
extensions!

49. DEPLOYMENT
I still haven’t completely figured this out.
Trigger compilation from Fabric.
Bonus:
sass --style compressed infile:outfile

50. Power
complexity
can’t use fancy GUI editors (SASS)
toolchain addition
Still pretty awesome.

51. Questions?

52. Thank you!
@idangazit