do more with {less}
DESCRIPTION
Subject: An overview of {less} and a crash course in usage, presented at the Drupal Design Camp Berlin 2011. Note: Licensed All Rights Reserved due to the images taken by others. All text is CC Attribution Share-alike.TRANSCRIPT
Do more with {less}
This session
Goal #1:
Show you why you should use {less}
Goal #2:
Teach you {less} in 30 minutes
There will be code
{less} to keep us sane
You don’t need notes
Jesper Wøldiche Rahkonen
Designer / themer / markup marine
*really* likes grids
twitter: woeldiche
About me
What
Why
Features
Learn {less}
Drupal
Extras
What is {less}
Overview
What
Why
Features
Learn {less}
Drupal
Extras
What is {less}
Overview
What
Why
Features
Learn {less}
Drupal
Extras
Why you should be using {less}
Overview
What
Why
Features
Learn {less}
Drupal
Extras
An overview of the features in {less}
Overview
What
Why
Features
Learn {less}
Drupal
Extras
I’ll teach you {less}, hopefully
Overview
What
Why
Features
Learn {less}
Drupal
Extras
Using {less} in drupal
Overview
What
Why
Features
Learn {less}
Drupal
Extras
Yummy extras, if time
Overview
What is {less}?
{less} extends css with new features
Compiles into ordinary (but yummy, yummy) CSS
A strict superset of CSS
Why use {less}?
Write less code
Why?
Write less code,
that’s faster to code up
Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project
Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project
or among several projects
Why?
And it’s dead-easy to learn, if you already know CSS
- honestly!
Feature overview
Variables (yay!)
Feature overview
Variables
Mixins (it’ll make sense, promise)
Feature overview
Variables
Mixins
Nested rules (for prettier code)
Feature overview
Variables
Mixins
Nested rules
Operations (it’s almost like programming)
Feature overview
Variables
Mixins
Nested rules
Operations
Color functions (Want channels with your HSL?)
Feature overview
Variables
Mixins
Nested rules
Operations
Color functions
+ more
Feature overview
Variables
1 // LESS2 @color: #4D926F;3 4 #header { 5 color: @color; 6 }7 8 h2 { 9 color: @color; 10 }11
12 /* Compiled CSS */13 #header { 14 color: #4D926F; 15 }16 17 h2 { 18 color: #4D926F;19 }
Variables
Mixins
// LESS1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }5 6 #menu a {7 color: #111;8 .bordered;9 }10 .post a {11 color: red;12 .bordered;13 }
Mixins
Mixins/* Compiled CSS */1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }5 6 #menu a {7 color: #111;8 border-top: dotted 1px black;9 border-bottom: solid 2px black;10 }11 .post a {12 color: red;13 border-top: dotted 1px black;14 border-bottom: solid 2px black;15 }
Any css class, id og element definition can be mixed in
Mixins
Define once. Use multiple time1 .awesome-styling { <awesome css go here> }2 3 .funky-box {4 .awesome-styling5 }6 7 .even funkier box {8 .awesome-styling9 <additional superfunky styling>10 }
Case: reusable styles
Case: hard to remember hacks workarounds1 .obscure-msie-hack { 2 <illogical, esoteric code> 3 }4 5 .content-that-works-in-any-other-browser {6 <styling>7 .obscure-msie-hack8 }
meh...
meh...
Now we’re talking.
They should be spelled paramëtric mixins and have a theme song.
Parametric mixins
Paramëtric mixins// LESS1 .rounded-corners (@radius: 5px) {2 -webkit-border-radius: @radius;3 -moz-border-radius: @radius;4 border-radius: @radius;5 }6 7 #header {8 .rounded-corners;9 }10 #footer {11 .rounded-corners(10px);12 }
Paramëtric mixins/* Compiled CSS */1 #header {2 border-radius: 5px;3 -webkit-border-radius: 5px;4 -moz-border-radius: 5px;5 }6 7 #footer {8 border-radius: 10px;9 -webkit-border-radius: 10px;10 -moz-border-radius: 10px;11 }
Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }
Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }
Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
designshack.co.uk/articles/css/introducing-the-less-css-grid
Case: Variable grid
Case: Style library
// Import .less1 @import “lib.less”;2 @import “lib2”;
// Import without processing3 @import “lib.css”;
@import
// LESS1 // Import libraries2 @import “lib-typography”;3 @import “lib-branding.less”;4 @import “lib-form_ui.less”;5 @import “lib-buttons.less”;6 7 /* Import base styling */8 @import “reset.css”;9 @import “typography.css”;10 11 /* Apply library styles */12 body { 13 .lib_ty-base14 .lib_brand-base15 }
16 form {17 .lib_form-base 18 .lib_form-modern19 ... your custom styles20 }21 22 input[type=text], 23 textarea {24 .lib_form-input-modern25 ... more custom styles 26 }
A style library
/* Compiled CSS */1 <content of reset.css>2 <content of typography.css>3 4 /* Apply library styles */5 body { 6 <styles of lib_ty-base>7 <styles of lib_brand-base>8 }9 form {10 <styles of lib_form-base> 11 <styles of lib_form-modrn>12 ... your custom styles13 }
14 input[type=text], 15 textarea {16 <styles of lib_form-input-modern>17 ... more custom styling 18 }
A style library
Operations
Any number, colour or value can be operated on
Operations
// LESS1 @base: 5%;2 @filler: @base * 2;3 @other: @base + @filler;4 5 color: #888 / 4;6 background-color: @base-color + #111;7 height: 100% / 2 + @filler;
// LESS1 @var: 1px + 5;2 3 // You can use brackets4 width: (@var + 5) * 2; 5 6 // Required for compound values 7 border: (@width / 11) solid black;
/* Compiled CSS */8 width: 22px;9 border: 2px solid black;
{less} tells colours from units
Case: Derived styling
// LESS1 @fontsize-default: 14px;2 @fontsize-sec: @fontsize-default * 0.8;3 @lineheight: 1.3;4 5 p {6 font-size: @fontsize-default;7 line-height: @lineheight * @fontsize-default;8 }9 10 .block p {11 font-size: @fontsize-sec;12 line-height: @lineheight * @fontsize-sec;13 }
Colour operations
Colour operations1 lighten(@color, 10%); // a color 10% *lighter*2 darken(@color, 10%); // a color 10% *darker*3 4 saturate(@color, 10%); // a color 10% *more* saturated5 desaturate(@color, 10%); // a color 10% *less* saturated6 7 fadein(@color, 10%); // a color 10% *less* transparent8 fadeout(@color, 10%); // a color 10% *more* transparent9 10 spin(@color, -10%); // return a color with a 10 degree larger in hue than @color11 spin(@color, 10%); // return a color with a 10 degree smaller hue than @color
Huh?
Colors are first converted to the HSL color-space
And then manipulated at the channel level
Nested rules
/* Old skool CSS */1 #header { color: black; }2 #header .navigation {3 font-size: 12px;4 }5 #header .logo { 6 width: 300px; 7 }8 #header .logo:hover {9 text-decoration: none;10 }
Nesting
// LESS1 #header {2 color: black;3 4 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
Nesting
// LESS1 #header {2 color: black;3 4 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
&-operator
{less} and Drupal™
The easy way in
The performance concious solution
The advanced version
Three ways to play it
The easy way in
Automatically compiles .less files in the theme to plain css
LESS module
Automatically compiles .less files in the theme to plain css
Development mode
LESS module
Automatically compiles .less files in the theme to plain css
Development mode
mylesstheme.info:1 ;----- Stylesheets ----------------------------2 stylesheets[screen][] = styles/mylesstheme.styles.less3 stylesheets[screen][] = styles/mylesstheme.typography.less4 5 ;----- IE specific stylesheets ---------------6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less
LESS module
Performance concious?
From the command line$ lessc styles.less > styles.css
Compiles to stdout
Compile locally
‘The only thing easier is making fun of Internet Explorer’
less.app
I’m {more} advanced
Compile clientside with less.js
1 @height: `document.body.clientHeight`;
Access JS enviroment
Build on top of css/less compiled serverside, right?
Progressive enhancement
Yummy extras
// LESS1 .class {2 filter: ~”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”;3 }
/* Compiled CSS */4 .class {5 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’);6 }
Escaping strings
1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }11 12 #header a {13 color: orange;14 #bundle > .button;15 }
Namespaces
1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }11 12 #header a {13 color: orange;14 #bundle > .button;15 }
Namespaces
Embed variables in strings with the @{param} construct
1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);
String interpolation
1 @var: `”hello”.toUpperCase() + ‘!’`;
Becomes
2 @var: “HELLO!”;
JS Evaluation
Questions?
Thank you!
{less} documentation: lesscss.org
Slides: slideshare.net/woeldiche
Less module: drupal.org/project/less
less.app: incident57.com/less/
Slides & docs