An overview of the CSS preprocessor LESS. Including code samples for creating mixins, variables, math, colors, patterns, guards, scope, and namespaces.
- 1. .LESSan overview of the CSS preprocessor/* Joe Seifi
@joeseifi */
2. When I am working ona problem, I never thinkabout beauty, but
whenI have nished, if thesolution is not beautiful,I know it is
wrong.Buckminster
Fullerhttp://www.flickr.com/photos/21680590@N06/4654423909/ 3.
http://www.flickr.com/photos/kejun/6988320204/authoring
abstractions have matured... 4. why less?CSS is fine... I dont
wanna add more complexity to it?Do we have to learn a new
programming language? 5. just a few reasonsCSS is fine... yes, but
our needs have outgrown its features.Using CSS on a big project
quickly becomes... 6.
http://www.flickr.com/photos/stevendepolo/3340172798/complex, 7.
http://www.flickr.com/photos/stevendepolo/3340172798/messy, 8.
http://www.flickr.com/photos/nathalier/3349184641/& hard to
manage. 9. http://www.flickr.com/photos/bohman/201715020/Existing
code is tough to maintain or update, 10.
http://www.flickr.com/photos/northbaywanderer/121971388/becomes
unreadable, 11. http://www.flickr.com/photos/miran/4538440349/and
is not reusable. 12. http://www.flickr.com/photos/via/42436087/less
gives us new tricks, tools, 13.
http://www.flickr.com/photos/jdhancock/3578775702/and its fun to
use. 14.
http://www.flickr.com/photos/shollingsworth/3069791717/getting
started with less... 15. /* Windows?
------------------------------Try tools like WinLess or SimpLESS.
You can also install less buildersfor most code editors like
Sublime Text 2 and Eclipse (see references.)http://winless.org/
http://wearekiss.com/simpless*/installinstall brew $ ruby
a{background-color:#ccc;padding:10px
15px;font-weight:700;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:0
1px 3px 0 #6a6a6a;-moz-box-shadow:0 1px 3px 0
#6a6a6a;-webkit-box-shadow:0 1px 3px 0
#6a6a6a;background-image:linear-gradient(top,#fff,17%,#d3d3d359%);background-image:-o-linear-gradient(top,#fff
17%,#d3d3d3 59%);background-image:-moz-linear-gradient(top,#fff
17%,#d3d3d3 59%);background-image:-ms-linear-gradient(top,#fff
17%,#d3d3d359%);background-image:-webkit-linear-gradient(top,#fff
17%,#d3d3d3 59%);background-image:-webkit-gradient(linear,left
top,left
bottom,color-stop(0.17,#fff),color-stop(0.59,#d3d3d3))}header#navigation
ul li>a.selected{background:#fff}header #navigation ul
li>a:hover{color:#f00} 19. /* Notes:
------------------------------The less compiler will find syntax
errors as well as errors withundefined variables. You can also try
csslint on your output files, butbe ready to get your feelings
hurt.*/debugginghtml {font-size 100%;}$ lessc source.less$
ParseError: Syntax Error on line 2 in source.less:2:01 html {2
font-size 100%;3 } 20. /* Inner Workings:
------------------------------Node compiles matching .less files
when it receives a URL request fora .css resource. For example if
you hit http://localhost/style.less Nodelooks for a style.less file
in the same path and compiles it into astyle.css file on the fly
and returns it to you.*/node.js & less
middlewareapp.configure(function(){app.use(require(less-middleware)({src:
__dirname + /public,compress: true,yuicompress: true, // one or the
otheroptimization: [0,1,2]}));} 21.
http://www.flickr.com/photos/papalars/777342980/imports in less 22.
/* Tips: ------------------------------LESS will import the
contents of files and concatenate them into the onefile, unless you
specify the .css extension. If you leave out the extensionLESS
looks for a .less file, not a .css file.*/imports@import reset.css;
// statement is left alone in output@import reset.less; //
processed and contents imported into output@import reset; // same
as above since the .less is optional 23.
http://www.flickr.com/photos/75491103@N00/3565601486/nesting in
less 24. /* Notes: ------------------------------Nesting in LESS
results in scope. We will cover scope in a few minutes.Nesting
order, spacing, and tabs are purely for readability. So you canalso
do things like: li > a.selected {} though it is not
recommended.*/nesting#navigation {li {display:
inline-block;&:first-child { padding: 5%; }> a
{&.selected { color: gray; }&:hover { background: red; }}}
25. /* Notes: ------------------------------Keep in mind that in
less, variables are actually constants, so they canonly be defined
once.Its good practice to line up your variable columns for good
readability.*/variables@base-font-size: 16;@base-padding: 5%;@base:
/images;@light-gray: #D3D3D3; 26. /* Hint:
------------------------------Most LESS aware editors like Coda 2
will suggest and auto-complete yourdefined variable names as you
type.*/using variables.box {padding:
@base-padding;background-color: @light-gray;} 27.
http://www.flickr.com/photos/75491103@N00/3565601486/using strings
in less 28. /* Details: ------------------------------Embed and use
variables using the @{variable} syntax, like PHP or Ruby.*/string
interpolation@base: /images;@light-gray: #D3D3D3;body {background:
@light-gray url("@{base}/bg.png");} 29. /* Details:
------------------------------Tilde escapes the value. You can also
use the e() function if you like.Use it for value calculations,
otherwise the output becomes font-size:20px not 20px. Also use the
~ with IE specific rules like filter.*/escaping
strings@base-font-size: 16;body {font-size:
~"@{base-font-size}px";filter: e("ms:likesProprietaryCssStuff()");}
30. http://www.flickr.com/photos/maisonbisson/201844037/math
operations 31. /* Notes: ------------------------------Basic math
operations (+ - * /) are supported in less. Whats great isthat any
CSS value, number, or color, plus any less variable can beoperated
on. This includes things like %, em, px, etc.More on color
operations later in this presentation.*/math
operations@base-padding: 5%;@gutter-padding: @base-padding *
2;@light-gray: #D3D3D3;@body-padding: @gutter-padding - 3; //
7%@body-color: @light-gray / 4; // #353535 32. /* Notes:
------------------------------Other Math functions like abs, max,
min, random, etc. are not supportedat this time.*/math
functions@width-flexible: percentage( 650 / 960 ); //
67.70833333333334%@width-round: round( @width-flexible ); //
1%@width-ceil: ceil( @width-flexible ); // 1%@width-floor: floor(
@width-flexible ); // 0% 33.
http://www.flickr.com/photos/rickchung/7832568498/mixins 34. /*
Notes: ------------------------------Mixins are functions in less.
They help you reuse css code.Keep in mind that this .button mixin
is actually is a basic CSS class inLESS and will appear in your
output file as such.*/mixins.button {! box-shadow: inset 1px 1px
5px 0px @light-gray / 2;! -webkit-border-radius: 5px;!
-moz-border-radius: 5px;! border-radius: 5px;} 35. /* Notes:
------------------------------The opening and closing parentheses
are not required when calling asimple mixin like this without
parameters. You always do have to includethe semi-colon.*/using
mixinsa {.button;}/* The result will be */a {! box-shadow: inset
1px 1px 5px 0px @light-gray / 2;! -webkit-border-radius: 5px;!
-moz-border-radius: 5px;! border-radius: 5px;} 36. /* Notes:
------------------------------The first part of the parameter is
the name and the second part is theoptional default value.
Parameterized mixins are not included in theresulting .css files by
the LESS compiler.*/mixins with parameters.ems(@size:
@base-font-size, @base: @base-font-size) {! @value: @size / @base;!
font-size: ~"@{value}em";} 37. /* Notes:
------------------------------Our mixin takes 2 paramters. Weve
made them both optional, so we canalso call the it using just
.ems(24); or .ems(); or .ems; in this case.It is good practice to
provide default values in your mixin definitions.*/passing mixin
parameters.title {! .ems(24, 16);}/* The result will be */.title {!
font-size: 1.5em;} 38. /* Notes: ------------------------------When
you call the .h1 mixin you will get the result from the ems mixin
aswell as the bold font, assigned to your calling class.*/mixins
calling other mixins.heading {! .ems(32);! font-weight: 700;}h1 {
.heading; }/* The result will be */h1 {! font-size: 2em;!
font-weight: 700;} 39.
http://www.flickr.com/photos/clydeorama/6327739969/arguments 40. /*
Notes: ------------------------------If you just use the @arguments
variable, it will spit out the values youneed based on what is
passed in and what defaults youve set up, in theorder you defined
them.*/the @arguments variable.box-shadow(@x: 0, @y: 0, @blur: 1px,
@spread: 1px, @color: #000){! box-shadow: @arguments;!
-moz-box-shadow: @arguments;! -webkit-box-shadow: @arguments;} 41.
/* Notes: ------------------------------You can only leave out
arguments at the end of an argument list, but notthe beginning. For
example you can do .box-shadow(0px, 0px, 3px); but youcant do
.box-shadow(0px, @light-gray / 2)*/using @arguments.button
{.box-shadow(0px, 0px, 3px, 0px, @light-gray / 2);}/* The result
will be */.button {box-shadow: 0px 1px 3px 0px
#6a6a6a;-moz-box-shadow: 0px 1px 3px 0px
#6a6a6a;-webkit-box-shadow: 0px 1px 3px 0px #6a6a6a;} 42.
http://www.flickr.com/photos/passetti/5605375493/less makes color
fun 43. /* Super Geeky stuff: ------------------------------LESS
first converts colors into the HSL (hue, saturation %, lightness
%)color-space, and then manipulates them at the channel
level.*/colors@green: #00FF00;lighten(@green, 30%); // #99ff99 -
30% *lighter*darken(@green, 30%); // #006600 - 30%
*darker*saturate(@green, 30%); // #00ff00 - 30% *more*
saturateddesaturate(@green, 30%); // #262926 - 30% *less* saturated
44. /* Super Geeky stuff: ------------------------------The mix
function requires a weight argument between 0-100.The fade
functions always return rgba values, unless the color has hit amax
alpha, such as blue above, which cant be made less
transparent.*/more color functions@blue: #0000FF;@red:
#FF0000;fade(@blue, 50%); // rgba(0,0,255,0.5) - 50%
transparencyfadein(@blue, 30%); // #0000ff - 30% *less*
transparentfadeout(@blue, 30%); // rgba(0,0,255,0.7) - 30% *more*
transparentspin(@blue, 30); // #7f00ff - 30 degrees larger
huespin(@blue, -30); // #007fff - 30 degrees smaller huemix(@blue,
@red, 50); // #800080 - a mid blend of @red and @blue 45.
http://www.flickr.com/photos/tomorrowstand/2280680315/patterns 46.
/* Notes: ------------------------------Mixin changes behavior
based on parameters.The first mixin will only match if our
@display-type variable has a valueof block and the second one will
only run if is set to inline. The @_argument matches any
value.*/switch patterns.switch-me (box, @color) { border-radius: 0;
}.switch-me (round, @color) { border-radius: 5px; }.switch-me (@_,
@color) { color: @color; }color: @color;.button {
.switch-me(@display-type, 300px); }// Output.button {display:
block;width: 300px;} 47. /* Notes:
------------------------------LESS inspects all defined mixin
signatures and only applies the one(s)that matches your called
arity.*/switch on arity.flex-box (@min) { min-width: @min;
}.flex-box (@min, @max) { min-width: @min; max-width: @max;
}.content {.flex-box(200px, 800px);}// Output.content {min-width:
200px;max-width: 800px;} 48. http://www.seifi.orgguards 49. /*
Notes: ------------------------------LESS uses the when keyword
instead of if/else statements.You can use the following comparison
operators < =< = >= >*/guarded mixins.mixin (@a) when
(lightness(@a) >= 50%) { background-color: black; }.mixin (@a)
when (lightness(@a) < 50%) { background-color: white; }.mixin
(@a) { color: @a; }.class1 { .mixin(#ddd) }.class2 { .mixin(#555)
}// Output.class1 { background-color: black; color: #dddddd;
}.class2 { background-color: white; color: #555555; } 50.
http://www.flickr.com/photos/mandolux/11290919/scope in less 51. /*
Notes: ------------------------------As you can see, LESS keeps
block scope inside curly braces.Note: Not to be confused with the
scoped style attribute introduced inHTML5.*/scope@my-text-color:
black;section {@my-text-color: gold;header {color: @var; //
gold}}footer {color: @my-text-color; // black} 52.
http://www.flickr.com/photos/newmediadaysdk/5178421986/namespaces
53. /* Notes: ------------------------------Namespaces allow for
code organization and or encapsulation. You haveaccess to the
@arguments variable as with mixins.*/namespaces#lib
{.clear(@direction) {zoom: 1;&:after { content: 00a0; clear:
@direction; display: block;}}}#wrapper {#lib > .clear(both); //
inserts our clear rules from the lib namespace} 54. /* Notes:
------------------------------Write helpful comments to help you
find scoped mixins when debugging.*/comments// Single line comments
are not shown in the compiled output/* Block level comments will be
kept in the output */ 55. THANKS 56.
CREDITSPluginshttp://lesscss.org/http://drupal.org/project/lesshttps://npmjs.org/package/lesshttp://rubygems.org/gems/lesshttp://www.asual.com/lesscss/http://wordpress.org/extend/plugins/wp-less/Toolshttp://winless.org/http://crunchapp.net/http://panic.com/coda/http://wearekiss.com/simplesshttp://incident57.com/codekit/https://github.com/danro/LESS-sublimehttps://github.com/berfarah/LESS-build-sublime/https://github.com/appden/less.tmbundlehttp://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.htmlhttp://csslint.net/Projectshttp://markdotto.com/bootstrap/http://less-griddy.webatu.com/http://lesselements.com/Other
CSS
Preprocessorshttp://code.google.com/p/closure-stylesheets/http://sass-lang.com/http://learnboost.github.com/stylus/
