Less CSS: The power to take advantage of dynamic behaviour

@anthonyalbertyn

Agenda

• Use case for extending CSS with dynamic

behaviour.

• What is {Less}?

• Options for using Less CSS in websites.

• Overview of the syntax with examples.

The inspiration to extend CSS with dynamic behaviour

• To use the power of variables and “functions”.

• To end up with less CSS code.

• To be able to make changes quickly and easily.

• To have fun doing geeky stuff!

Disadvantages of {Less} CSS and similar technologies

• Not controlled by W3C standards.

• Limited best practice available.

• If not used carefully, you could end up with less

CSS and more complexity!

What is {Less} CSS?

• Dynamic stylesheet language designed by

Alexis Sellier from Berlin - @cloudhead.

• Open source - Apache 2 License.

• Less was designed as a Nested metalanguage

- valid CSS is valid Less code with the same

semantics.

What is {Less} CSS?

• Less can run client-side (IE6+, WebKit,

Firefox).

• Less can run server-side (Node.js or Rhino).

• Less can be pre-compiled into CSS.

• First version of was written in Ruby but this

was replaced by a JavaScript version.

Less provides the following mechanisms

• Variables

• Nesting

• Mixins - classes that provides functionality to

be inherited or re-used by a sub-class.

• Operators

• Functions

Comparison between Less and Saas

• Both are CSS pre-processors.

• Less was influenced by SASS.

• Less syntax was closer to CSS than Sass, but

with the release of Sassy CSS (SCSS) this is

no longer the case.

Comparison between Less and Saas

• Saas is more mature and has slightly more

features.

• They are pre-processed differently:

◦ Less uses JavaScript and can run

client-side.

◦ Sass uses Ruby so runs server-side.

Comparison between Less and Saas

• Less can be slower to compile on the fly when

running client-side.

• Both can be pre-compiled into pure CSS before

uploading style sheets to sites – meaning no

difference in performance.

• Syntax - https://gist.github.com/674726

Implementation of Less in websites

• Let the website convert the Less code to CSS

on the fly by including the less.js file – available

from http://www.lesscss.org

• Alternatively convert on the fly using the PHP

implementation - http://leafo.net/lessphp

Implementation of Less in websites

• Pre-compile the Less code into CSS and then

add the CSS to the website - site does not

need the less.js file.

• Drupal has a module that implements the PHP

version of Less - www.drupal.org.project/less

Less CSS compilers

• Free compiler for mac -

http://incident57.com/less

• Free compiler for mac, pc, linux -

http://wearekiss.com/simpless

JavaScript Implementation

● Download less.js from www.lesscss.org

● Add your Less CSS code to a text file with a

.less extension eg. styles.less

● Include less.js with your styles:<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

VariablesLess syntax CSS output

// Declare a numeric variable@red: #ff0000;

// Declare a string variable@path: "/sites/default/files/images";

// Apply these variables.block { color: @red; background:url('@{path}/mypic.jpg');}

.block { color: #ff0000; background: url('/sites/default/ files/images/mypic.jpg');}

MixinsLess syntax CSS output

.myborders { border-top: 1px solid #000; border-bottom: 5px solid #ff0;}

.block1 { background-color: #f2f2f2; .myborders;}

.block5 { .myborders;}

.block1 { background-color: #f2f2f2; border-top: 1px solid #000; border-bottom: 5px solid #ff0;}

.block5 { border-top: 1px solid #000; border-bottom: 5px solid #ff0;}

Nested RulesLess syntax CSS output

#header { .logo { margin: 10px 20px; } .mission { color: #ff0; } .menu { color: #000; &:hover { text-decoration: underline; } }}

#header .logo { margin: 10px 20px;}

#header .mission { color: #ff0;}

#header .menu { color: #000;}

#header .menu:hover { text-decoration: underline;}

Parametric Mixins (functions)Less syntax CSS output

.myborder(@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;}

.block1 { .myborder(5px);}

.button { .myborder(3px);}

.block1 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

Pattern matchingLess syntax CSS output

.myborder(@color, @size){border: @size solid @color;}

.myborder(@color){border: 1px solid @color;padding: 20px;}

.block1 { .myborder(#000, 5px);}

.block2 { .myborder(#000);}

.block1 { border: 5px solid #000000;}

.block2 { border: 1px solid #000000; padding: 20px;}

When there are two mixins with same name and different parameter sets, Less will match theparameter pattern and apply the mixin that matches.

Guard expressions (if statements)Less syntax CSS output

.myblock (@size) when (@size < 10){ font-size: @size; color: red;}

.myblock (@size) when (@size > 20) and (@size < 30){ font-size: @size; color: green;}

.myblock (@size) when (@size = 50),(@size=60){ font-size: @size; color: blue;}

… continued next page

.block1 { font-size: 5; color: red;}

.block2 { font-size: 25; color: green;}

.block3 { font-size: 50; color: blue;}

.block4 { font-size: 60; color: blue;}

.block1{ .myblock(5);}

.block2 { .myblock(15);}

.block3 { .myblock(50);}

.block4 { .myblock(60);}

Operations (+ - * /)Less syntax CSS output

@width: 5px;

.box1 { border: (@width*2)solid #000;}

.box2 { border: (@width*3) solid #000;}

.box 3 { padding: (@width+5)*2;}

.box1 { border: 10px solid #000000;}

.box2 { border: 15px solid #000000;}

.box 3 { padding: 20px;}

Colour functions// return a color which is 10% *lighter* than @colorlighten(@color, 10%);

// return a color which is 10% *darker* than @colordarken(@color, 10%);

// return a color 10% *more* saturated than @colorsaturate(@color, 10%);

// return a color 10% *less* saturated than @colordesaturate(@color, 10%);

// return a color 10% *less* transparent than @colorfadein(@color, 10%);

// return a color 10% *more* transparent than @colorfadeout(@color, 10%);

// return @color with 50% transparencyfade(@color, 50%);

// return a color with a 10 degree larger in hue than @colorspin(@color, 10);

// return a color with a 10 degree smaller hue than @colorspin(@color, -10);

// return a mix of @color1 and @color2mix(@color1, @color2);

Example Implementation from lesscss.org:

@base: #f04615;

.class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%);}

Math functionsExamples from lesscss.org:

LESS provides a couple of math functions you can use on number values:

round(1.67); // returns '2'ceil(2.4); // returns '3'floor(2.6); // returns '2'

If you need to turn a value into a percentage, you can do so with the percentage function:

percentage(0.5); // returns '50%'

NamespacesLess syntax CSS output

#mynamespace { .link { color: #ff0; } .mybox { padding: 20px; } .myborder { border: 2px solid #ff0; }}

.box1 { #mynamespace > .mybox;}

.box1 { padding: 20px;}

Very useful if you want to create your own CSS libraries or distribute CSS.

ScopeExample from lesscss.org:

@var: red;

#page { @var: white; #header { color: @var; // white }}

#footer { color: @var; // red}

Scope is similar to other programming languages. Variables and mixins first looked up locally and then if not found it looks for them in the parent.

About Anthony Albertyn

• Owns a small digital marketing agency – www.binarybrand.com

• Drupal Themer and Chartered Marketer.

• Co-organiser of DrupalCambs – www.meetup.com/drupalcambs

• Was the marketing team lead for DrupalCon London 2011 -

http://london2011.drupal.org/community/drupalcon-london-team

References

• http://www.lesscss.org

• http://leafo.net/lessphp

• http://sass-lang.com

• https://github.com/cloudhead

References

• http://en.wikipedia.org/wiki/LESS_(stylesheet_language )

• http://coding.smashingmagazine.com/2011/09/09/an-

introduction-to-less-and-comparison-to-sass