Less css
-
Upload
anthony-albertyn -
Category
Technology
-
view
2.210 -
download
0
description
Transcript of Less css
![Page 1: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/1.jpg)
Less CSS: The power to take advantage of dynamic behaviour
@anthonyalbertyn
![Page 2: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/2.jpg)
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.
![Page 3: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/3.jpg)
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!
![Page 4: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/4.jpg)
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!
![Page 5: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/5.jpg)
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.
![Page 6: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/6.jpg)
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.
![Page 7: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/7.jpg)
Less provides the following mechanisms
• Variables
• Nesting
• Mixins - classes that provides functionality to
be inherited or re-used by a sub-class.
• Operators
• Functions
![Page 8: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/8.jpg)
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.
![Page 9: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/9.jpg)
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.
![Page 10: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/10.jpg)
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
![Page 11: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/11.jpg)
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
![Page 12: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/12.jpg)
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
![Page 13: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/13.jpg)
Less CSS compilers
• Free compiler for mac -
http://incident57.com/less
• Free compiler for mac, pc, linux -
http://wearekiss.com/simpless
![Page 14: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/14.jpg)
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>
![Page 15: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/15.jpg)
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');}
![Page 16: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/16.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;}
![Page 17: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/17.jpg)
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;}
![Page 18: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/18.jpg)
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;}
![Page 19: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/19.jpg)
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.
![Page 20: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/20.jpg)
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;}
![Page 21: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/21.jpg)
.block1{ .myblock(5);}
.block2 { .myblock(15);}
.block3 { .myblock(50);}
.block4 { .myblock(60);}
![Page 22: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/22.jpg)
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;}
![Page 23: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/23.jpg)
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%);
![Page 24: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/24.jpg)
// 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%);}
![Page 25: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/25.jpg)
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%'
![Page 26: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/26.jpg)
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.
![Page 27: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/27.jpg)
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.
![Page 28: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/28.jpg)
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
![Page 29: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/29.jpg)
References
• http://www.lesscss.org
• http://leafo.net/lessphp
• http://sass-lang.com
• https://github.com/cloudhead
![Page 30: Less css](https://reader034.fdocuments.in/reader034/viewer/2022050801/548356ffb4af9fc23a8b45e0/html5/thumbnails/30.jpg)
References
• http://en.wikipedia.org/wiki/LESS_(stylesheet_language )
• http://coding.smashingmagazine.com/2011/09/09/an-
introduction-to-less-and-comparison-to-sass