Introduction To Less

1,116 views
1,012 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,116
On SlideShare
0
From Embeds
0
Number of Embeds
663
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 :)

×