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.

Introduction To Less

1,279 views

Published on

The slide intend to give a brief knowledge of Less(CSS pre processor).

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction To Less

  1. 1. Ankit Shukla Knoldus Software LLP Ankit Shukla Knoldus Software LLP Less
  2. 2. Topics to be Covered ● About Less ● Variables ● Scope ● Mixins ● Nested Rules ● Namespaces ● Operations ● Functions ● Extend ● Mixin Guards ● Loop ● Parent Selector
  3. 3. About Less ● Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques. ● Developed by Alexis Sellier in 2009. ● The current stable version is 1.7.3 ● Inspired by SASS. ●
  4. 4. Variables ● Variables in less are defined with @ ● The assignment is done by : ● It stores a constant value. ● Some properties are used many times in our CSS. It helps to make our code easier to maintain by giving us way to control the repeated properties from a single location.
  5. 5. Variables Continues... Less Code: @color : #33333; p{ color : @color; } .demo { background : @color; } Output : p{ color : #333333; } .demo{ background : #333333; }
  6. 6. Scope @var: red; #page { #header { @var: white; color: @var; // white } color : @var; } ● Output #page { color: #ff0000; } #page #header { color: #ffffff; }
  7. 7. Mixin .demo-class{ color : #aaa; font-size : 20px; } .class-A{ .demo-class; background : #000; } Output: .demo-class { color: #aaa; font-size: 20px; } .class-A{ color : #aaa; font-size : 20px; background : #000; }
  8. 8. If you do not want that mixin to be output, you can put parenthesis after it. .mixin { color: black; } .other-mixin() { background: white; } .class { .my-mixin; .other-mixin; } Output: .mixin { color: black; } .class { color: black; background: white; }
  9. 9. Parametric Mixins .demo-class(@padding){ padding : @padding; } .class-A{ .demo-class(5px); background : #000; } .class-B{ .demo-class(8px); } Output .class-A{ padding : 5px; background : #000; } .class-B{ padding : 8px; }
  10. 10. Nested Rules #header { color: #999; .logo { width: 300px; &:hover{ width:350px; } } } Output: #header { color: #999; } #header .logo { width: 300px; } #header .logo:hover { width: 350px; }
  11. 11. Namespaces #bundle { .button { display: block; border: 1px solid black; background-color: grey; } } #header a { color: orange; #bundle > .button; } ● Output #bundle .button { display: block; border: 1px solid black; background-color: grey; } #header a { color: orange; display: block; border: 1px solid black; background-color: grey; }
  12. 12. Operations @base: 5%; @filler: @base * 2; @other: @base + @filler; @base-color : #aaa; #class{ color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; width : @other + 50%; } ● Output #class { color: #222222; background-color: #bbbbbb; height: 60%; width: 65%; }
  13. 13. Functions @base: #f04615; @width: 0.5; .class { width: percentage(@width); color: saturate(@base, 5%); } ● Output .class { width: 50%; color: #f6430f; }
  14. 14. Extend ● Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references. ● Extend Syntax : .a:extend(.b) {} or .a { &:extend(.b);}
  15. 15. Extend Continues... .a { color : #666; } .b:extend(.a){ font-size : 24px ; } ● Output .a, .b { color: #666; } .b { font-size: 24px ; }
  16. 16. Extend All .test.c { color: orange; } .test { color : #555; } .replacement { &:extend(.test all); } ● Output .test.c, .replacement.c { color: orange; } .test, .replacement { color: #555; }
  17. 17. Mixin Gaurds .mixin (@a) when (percentage(@a) >= 50%) { background-color: black; } .mixin (@a) when (percentage(@a) < 50%) { background-color: white; } .mixin (@a) { width: percentage(@a); } .class1 { .mixin(.4) } .class2 { .mixin(.6) } ● Output .class1 { background-color: white; width: 40%; } .class2 { background-color: black; width: 60%; }
  18. 18. Loop .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } .generate-columns(2); ● Output .column-1 { width: 50%; } .column-2 { width: 100%; }
  19. 19. Parent Selector .A { .B { &:hover{ color :#222; } & & { color: green; } } } ● Output .A .B:hover { color: #222; } .A .B .A .B { color: green; }
  20. 20. Parent Selector Continues... .header { .menu { border-radius: 5px; .no-borderradius & { border : none; } } } ● Output .header .menu { border-radius: 5px; } .no-borderradius .header .menu { border: none; }
  21. 21. Thank You :)

×