Less css

Less CSS: The power totake advantage ofdynamic 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 withdynamic 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 andsimilar 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>

Variables Less syntax CSS output// Declare a numeric variable .block {@red: #ff0000; color: #ff0000; background: url(/sites/default/// Declare a string variable files/images/mypic.jpg);@path: "/sites/default/files/images"; }// Apply these variables.block { color: @red; background:url(@{path}/mypic.jpg);}

Mixins Less syntax CSS output.myborders { .block1 { border-top: 1px solid #000; background-color: #f2f2f2; border-bottom: 5px solid #ff0; border-top: 1px solid #000;} border-bottom: 5px solid #ff0; }.block1 { background-color: #f2f2f2; .block5 { .myborders; border-top: 1px solid #000;} border-bottom: 5px solid #ff0; }.block5 { .myborders;}

Nested Rules Less syntax CSS output#header { #header .logo { .logo { margin: 10px 20px; margin: 10px 20px; } } .mission { #header .mission { color: #ff0; color: #ff0; } } .menu { color: #000; #header .menu { &:hover { color: #000; text-decoration: underline; } } } #header .menu:hover {} text-decoration: underline; }

Parametric Mixins (functions) Less syntax CSS output.myborder(@radius) { .block1 { border-radius: @radius; border-radius: 5px; -moz-border-radius: @radius; -moz-border-radius: 5px; -webkit-border-radius: @radius; -webkit-border-radius: 5px;} }.block1 { .button { .myborder(5px); border-radius: 3px;} -moz-border-radius: 3px; -webkit-border-radius: 3px;.button { } .myborder(3px);}

Pattern matching Less syntax CSS output.myborder(@color, @size){ .block1 {border: @size solid @color; border: 5px solid #000000;} }.myborder(@color){ .block2 {border: 1px solid @color; border: 1px solid #000000;padding: 20px; padding: 20px;} }.block1 { .myborder(#000, 5px);}.block2 { .myborder(#000);}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){ .block1 { font-size: @size; font-size: 5; color: red; color: red;} }.myblock (@size) when (@size > 20) and (@size < 30){ .block2 { font-size: @size; font-size: 25; color: green; color: green;} }.myblock (@size) when (@size = 50),(@size=60){ .block3 { font-size: @size; font-size: 50; color: blue; color: blue;} } .block4 {… continued next page 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: 10px solid #000000;.box1 { } border: (@width*2)solid #000;} .box2 { border: 15px solid #000000;.box2 { } border: (@width*3) solid #000;} .box 3 { padding: 20px;.box 3 { } padding: (@width+5)*2;}

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 2ceil(2.4); // returns 3floor(2.6); // returns 2If you need to turn a value into a percentage, you can do so with thepercentage function:percentage(0.5); // returns 50%

Namespaces Less syntax CSS output#mynamespace { .box1 { .link { padding: 20px; color: #ff0; } } .mybox { padding: 20px; } .myborder { border: 2px solid #ff0; }}.box1 { #mynamespace > .mybox;}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 andthen 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

Less css

by anthonyalbertyn on Jan 24, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Less css — Presentation Transcript