CSS Extenders
52
http://flic.kr/p/768ooD Bonus: Compass Framework LESS SASS Intro to CSS Extenders: PyWeb-IL #22 / 27 Dec 2010
-
Upload
idan-gazit -
Category
Self Improvement
-
view
2.389 -
download
0
description
Slides from talk I gave at PyWeb-IL #22, 27 Dec 2010.
Transcript of CSS Extenders
http://flic.kr/p/768ooD
Bonus: Compass Framework
LESS
SASS
Intro to CSS Extenders:
PyWeb-IL #22 / 27 Dec 2010
http://flic.kr/p/5cCATU
This frontend dude maintains…
a production site with lots of CSS
a heavy drinking habit
a growing hatred for humanity
SMILE
CSS can be annoying.Here are some workarounds
that might make you
CSS ANNOYANCESvariables
class mixins
rule nesting
math
CSS ExtendersCSS Preprocessors is a crappy name.
srsly? at pyweb?(please don’t shoot me)
SASSsass-lang.com
LESSlesscss.org
CleverCSSvery similar • not as mature • not actively developed
variables
class mixins
rule nesting
math
variables
class mixins
rule nesting
math
CleverCSS SASS LESS
DSL is for losers.
DSL CSS Superset
CleverCSS SASS(.scss)
LESS
Yeah, um,what he said…
DSL CSS Superset
INSTALLING
gem install less
.less
gem install haml
.scss
DSL: .sass
VARIABLES & OPERATIONS
@mycolor: #ddeeff;@myborder: 3px;
#mynav {background-color: @mycolor;color: @mycolor + #111;
}
.hasborder {border: @myborder solid black;padding: @myborder * 4;
}
$mycolor: #ddeeff;$myborder: 3px;
#mynav {background-color: $mycolor;color: $mycolor + #111;
}
.hasborder {border: $myborder solid black;padding: $myborder * 4;
}
Basic Color Math@mycolor + #111
Basic Color Math$mycolor + #111
Fancy color functionslighten($mycolor, 20%)
Advantage: SASS
MIXINS
.sidebar {font-size: 14px;background-color: #ddd;width: 100px
}
.sidebar_right {.sidebar;float: right;
}
.sidebar_left {.sidebar;float: left;
}
@mixin sidebar {font-size: 14px;background-color: #ddd;width: 100px;
}
.sidebar_right {@include sidebar;float: right;
}
.sidebar_left {@include sidebar;float: left;
}
.sidebar(@width: 100px) {font-size: 14px;background-color: #ddd;width: @width;
}
.sidebar_right {.sidebar;float: right;
}
.sidebar_right_wide {.sidebar(150px);float: right;
}
@mixin sidebar($width: 100px) {font-size: 14px;background-color: #ddd;width: $width;
}
.sidebar_right {@include sidebar;float: right;
}
.sidebar_right_wide {@include sidebar(150px);float: right;
}
NESTED RULES
#header {color: green;
}
#header a {text-decoration: none;color: red;
}
#header#header a#header ul#header ul li#header ul li strong#content a#content ul…#FML
#header {color: green;a {
text-decoration: none;color: red;
}a.special {
font-weight: bold;color: blue;
}}
#header {color: green;a {
text-decoration: none;color: red;
}a.special {
font-weight: bold;color: blue;
}}
#header {color: green;border: {
width: 1px;color: black;style: solid;
}}
?
INHERITANCE
.error {color: red;
}
.error.severe {@extend .error;font-weight: bold;
}
?
INCLUDES
/* mysnippet.less */…
/* style.less */@import “mysnippet”
/* _mysnippet.scss */…
/* style.scss */@import “mysnippet”
Rope!enough for you to hang yourself with.
USAGE & DEPLOYMENT
lessc style.lesssass style.scss:style.css
sass srcdir/sass:srcdir/css
lessc style.less
lessc style.less --watch
sass style.scss:style.css
sass srcdir/sass:srcdir/css
sass --watch style.scss:style.css
sass --watch srcdir/sass:srcdir/css
Less functionality
Less documentation
Took ideas from SASS
Core is the same
More functionality
More documentation
Took ideas from LESS
Core is the same
Less functionality
Less documentation
Took ideas from SASS
Core is the same
More functionality
More documentation
Took ideas from LESS
Core is the same
A CSS Authoring Frameworkbased on SASS
http://compass-style.orgbut really, you should see
http://beta.compass-style.org
Like Django for CSSextensible, best-practice implementations
that you don’t need to reinvent
Installinggem install compass
compass create /path/to/project
_BASE.SCSS$brand_color: #acd29f;$base_font_size: 16px;
@import “compass/reset”;@import “compass/utilities”;
…
MYAPP.CSS@import “base”;
/* your sassy styles go here. */
DEJA VU?{% extends “base.html” %}
<!-- your markup goes here. -->
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>
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; }
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>
COST: LARGER CSSGenerated 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 */ }
VENDOR PREFIX HELL@import “compass/css3”.alert {
background-color: red;@include border-radius(4px)
}
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;
}
SAME POWERFUL TECHNIQUES,NEW LOW PRICE
cross-browser hacks and fixes
shortcuts around verbose CSS
pre-baked layout (ex: sticky footer)
spriting
extensions!
DEPLOYMENTI still haven’t completely figured this out.
Trigger compilation from Fabric.
Bonus:
sass --style compressed infile:outfile
Powercomplexity
can’t use fancy GUI editors (SASS)toolchain addition
Still pretty awesome.
Questions?
Thank you!@idangazit
