Less css

1. Who am I?

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. Processing The LESS compiler is written in JavaScript. The compiler converts your LESS code into CSS when the browser loads the page Processing

4. Why LESS? LESS has everything that CSS is missing. Features: 1- Variables 2- Mixins 3- Nested rules 4- Operators and functions

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. Variables (Cons) Ex: // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }

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. /* 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. 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. Ex: // LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /* Compiled CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }

11. Operators and functions which let you create CSS properties mathematically. Ex: // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } /* Compiled CSS */ #header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }

12. Use Download: http://lesscss.org/ <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>