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