Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LESS CSS

519 views

Published on

The power to take advantage of dynamic behavior

Published in: Software
  • Be the first to comment

LESS CSS

  1. 1. The power to take advantage of dynamic behavior
  2. 2. b Agenda • What is {Less}? • Why {Less}? • Implementation of {Less} in websites. • Comparison between Less and Sass • Overview of the syntax with examples.
  3. 3. b What is {Less}? • Dynamic style sheet 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. • Less can run client-side (IE8+, WebKit, Firefox). • Less can run server-side (Node.js). • Less can be pre-compiled into CSS. • First version of was written in Ruby but this was replaced by a JavaScript version.
  4. 4. b Why {Less}? • Save time • Reduce mistakes • Reduce repetition • It makes logical sense to break out CSS into multiple files • More Readability
  5. 5. b 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 • 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>
  6. 6. b Comparison between Less and Sass • Sass is more mature and has slightly more features[compass ] • They are pre-processed differently: • Less uses JavaScript and can run client-side. • Sass uses Ruby so runs server-side. • 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 • https://gist.github.com/wilmoore/820035 • http://www.hongkiat.com/blog/sass-vs-less/ • http://www.quora.com/Which-is-better-Less-Compass-or-Sass
  7. 7. b Less CSS compilers Respectively all major editors can be used for writing {Less} • Free compiler for mac – http://incident57.com/less • Free compiler for mac, pc, Linux – http://wearekiss.com/simpless http://winless.org/online-less-compiler WinLess Crunch! Mixture Adobe Dream Weaver Notepad++ Sublime Text 2 Kineticwing IDE Coda Geany
  8. 8. b Syntax with examples. -LESS has everything that CSS is missing. {Less} allows the dynamic editability options for dynamic stylesheet with help of these • Variables • Mixins • Cascading + Nesting • &combinator • Operations • Comments • @import • String interpolation • Escaping • Namespaces • Scope • Extend • Loops
  9. 9. b Variables • Start with @ symbol • Can storehexadecimalcolors, e.g. #333 or #fefefe • Can store strings, e.g. “Webucator, Inc.” • Can store sizes, e.g. 10px LESS 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'); }
  10. 10. b Mixins • Include properties from one ruleset to another • Reuse code • Can accept parameters • Can define default value for parameters • @arguments is a special variable that contains the ordered value stored in all parameters LESS Syntax CSS Output .border-radius(@radius: 2px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } @gray: #333; header > nav { border:1px solid @gray; .border-radius; } aside > nav { .border-radius(5px); } header > nav { border:1px solid #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } aside > nav { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  11. 11. b Cascading + Nesting • Nest rulesets in place of cascading • Can be used in combination with traditional cascading approach • Mimics your DOM structure • Outputs to cascading rulesets LESS Syntax LESS Nesting header { color: white; } header .logo { width:300px; float:left; } header > #searchcontainer { width:300px; float:right; } header > #searchcontainer input { width:250px; margin-right:6px; color:@darkGray; } header > #searchcontainer input:focus { color:@lightGray; } header { color: white; .logo { width:300px; float:left; } #searchcontainer { width:300px; float:right; input { width:250px; margin-right:6px; color:@darkGray; &:focus { color:@lightGray; } } } }
  12. 12. b &combinator • Nested selector is concatenated to the parent selector • Useful for pseudo-classes • &:hover • &:focus LESS Syntax CSS Output @gray: #333; img { border:none; &:focus { border:1px solid @gray; } @.inline { display:inline; } } img { border:none; } img:focus { border:1px solid #333; } img.inline { display:inline; }
  13. 13. b Operations - which let you create CSS properties mathematically. • Any number, color or variable can be operated upon • Math functions • Math operators ( +, -, *, /) • Color functions LESS Syntax CSS Output @padding: 2px; figure { padding:@padding; img { padding:@padding * 2; } figcaption { padding:@padding + 4px; } } figure { padding:2px; } figure img { padding:4px; } figure figcaption { padding: 6px; }
  14. 14. b Comments Comments are pretty straight-forward in LESS. Multiline comments are preserved and included in the CSS output when you compile the LESS, and single line comments are not preserved. Therefore, you should generally use single line comments, unless you really need the comment to be included in the generated CSS. • /* These comments are preserved into your compiled CSS */ • // These comments are silent
  15. 15. b @import • @import will compile and copy result into single file • All variables and mixins are available to main file or files imported after declarations • Order matters • Can include/ignore .less extension • Can import “classic” css using .css extension • You can break out files logically, but avoid the (terrible) @import() statement in traditional CSS LESS @IMPORT Syntax // import normalize for CSS resets @import "normalize"; // same as @import “normalize.less”; // import mixins @import "mixins"; // base for mobile devices @import "base"; //tables and small laptops @media only screen and (min-width: 768px) { @import "768up"; } //desktop @media only screen and (min-width: 1030px) { @import "1030up"; }
  16. 16. b String Interpolation • Use @{name} construct • For embedding variable values within declarations @baseUrl: “http://www.webucator.com/”; @imageUri: “images/”; background-image: url(‘@{baseUrl}@{imageUri}bg.png’); background-image: url(‘http://www.webucator.com/images/bg.png’);
  17. 17. b Namespaces - Groups of styles that can be called by references. - Very useful if you want to create your own CSS libraries or distribute CSS LESS Syntax CSS Output #my_framework{ p{ margin:12px 0; } a{ color:blue; text-decoration:none; } .submit{ background:red; color:white; padding:5px 12px; } } .submit_button{ #my_framework > .submit; } #my_framework p{ margin:12px 0; } #my_framework a{ color:blue; text-decoration:none; } #my_framework .submit{ background:red; color:white; padding:5px 12px; } .submit_button{ background:red; color:white; padding:5px 12px; }
  18. 18. b Scope - Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on. LESS Scope Syntax @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }
  19. 19. b Extend - Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references. LESS Syntax CSS Output nav ul { &:extend(.inline); background: blue; } .inline { color: red; } nav ul { background: blue; } .inline, nav ul { color: red; }
  20. 20. b Loops - Creating loops LESS Syntax CSS Output .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop } div { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; } LESS Syntax CSS Output .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
  21. 21. b My Perspective • It's easy to install, you can use a JavaScript file for client side compiling during development, and there are several ways to compile the less files to CSS server side for production. • Syntax very close to original CSS. • Easy to Understand In the end, it is still up to the end-user’s decision to pick the preprocessor of their choice. Be it Sass or LESS, as long as they are comfortable and more productive.
  22. 22. b References • http://lesscss.org/features/ • http://css-tricks.com/snippets/javascript/lighten-darken-color/ • https://stackoverflow.com/questions/21821947/calculate-differen • https://github.com/less/less.js/archive/master.zip • http://www.lesscss.org • http://leafo.net/lessphp • http://sass-lang.com • https://github.com/cloudhead • http://en.wikipedia.org/wiki/LESS_(stylesheet_language) • http://coding.smashingmagazine.com/2011/09/09/an- introduction-to-less-and-comparison-to-sass
  23. 23. b
  24. 24. Thank You 

×