Mais conteúdo relacionado Semelhante a CSS Extenders (20) CSS Extenders1. 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
7. SASS LESS
sass-lang.com lesscss.org
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
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
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;
} }
22. #header {
color: green;
}
#header a {
text-decoration: none;
color: red;
}
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;
}
}
?
27. .error {
color: red;
}
.error.severe {
@extend .error;
font-weight: bold;
}
?
29. /* _mysnippet.scss */ /* mysnippet.less */
… …
/* style.scss */ /* style.less */
@import “mysnippet” @import “mysnippet”
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
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 */ }
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.