Who am I?
What is LESS?What is LESS? - LESS=The dynamic stylesheet language. - LESS extends the standard CSS syntax. This means that...
ProcessingProcessing - The LESS compiler is written in JavaScript. - The compiler converts your LESS code into CSS when th...
Why LESS?- LESS has everything that CSS is missing.- Features:  1- Variables  2- Mixins  3- Nested rules  4- Operators and...
Variables- When you program you can set a constant variable that you can access throughout  your program.- You can do the ...
Variables (Cons)Ex: // LESS @color: #4D926F; #header {   color: @color; } h2 { color: @color; } /* Compiled CSS */ #header...
Mixins- allow you to embed all the properties of a class into another class by simply  including the class name as one of ...
/* Compiled CSS */#header {  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}#footer {  border-...
Nested rules- You can simply nest selectors inside other selectors.- These can save you a lot of coding, and they make you...
Ex:// LESS                        /* Compiled CSS */#header {                      #header h1 {  h1 {                     ...
Operators and functions- which let you create CSS properties mathematically.Ex:// LESS                                    ...
Use- Download: http://lesscss.org/- <link rel="stylesheet/less" type="text/css" href="styles.less">  <script src="less.js"...
Upcoming SlideShare
Loading in …5
×

Less css

1,508 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,508
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Less css

  1. 1. Who am I?
  2. 2. What is LESS?What is LESS? - LESS=The dynamic stylesheet language. - LESS extends the standard CSS syntax. This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it.
  3. 3. ProcessingProcessing - The LESS compiler is written in JavaScript. - The compiler converts your LESS code into CSS when the browser loads the page
  4. 4. Why LESS?- LESS has everything that CSS is missing.- Features: 1- Variables 2- Mixins 3- Nested rules 4- Operators and functions
  5. 5. Variables- When you program you can set a constant variable that you can access throughout your program.- You can do the same with LESS. Set a variable named @red, add your favorite hex red color and use it in your stylesheet.- Wanna change the color a bit? Just change the @red value and smile
  6. 6. Variables (Cons)Ex: // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }
  7. 7. Mixins- allow you to embed all the properties of a class into another class by simply including the class name as one of its properties.Ex:// LESS.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;} #header { .rounded-corners; } #footer { .rounded-corners(10px); }
  8. 8. /* Compiled CSS */#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
  9. 9. Nested rules- You can simply nest selectors inside other selectors.- These can save you a lot of coding, and they make your code clearer. Bye bye long selectors!
  10. 10. Ex:// LESS /* Compiled CSS */#header { #header h1 { h1 { font-size: 26px; font-size: 26px; font-weight: bold; font-weight: bold; } } #header p { p{ font-size: 12px; font-size: 12px; } a{ #header p a { text-decoration: none; text-decoration: none; &:hover { } border-width: 1px #header p a:hover { } border-width: 1px; } } } }
  11. 11. Operators and functions- which let you create CSS properties mathematically.Ex:// LESS /* Compiled CSS */@the-border: 1px; #header {@base-color: #111; color: #333;@red: #842210; border-left: 1px;#header { border-right: 2px; color: @base-color * 3; } border-left: @the-border; #footer { border-right: @the-border * 2; color: #114411;} border-color: #7d2717;#footer { } color: @base-color + #003300; border-color: desaturate(@red, 10%);}
  12. 12. Use- Download: http://lesscss.org/- <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

×