Less css
Download as PPTX, PDF1 like2,053 views
LESS is a dynamic stylesheet language that extends CSS syntax. The LESS compiler converts LESS code into regular CSS. LESS adds features like variables, mixins, nested rules, and functions that allow things like setting variables to reuse colors and values, embedding selectors to reduce code, nesting rules to organize selectors, and performing operations to generate CSS properties mathematically.
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 Processing - The LESS compiler is written in JavaScript. - The compiler converts your LESS code into CSS when the browser loads the page
- 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 /* 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. 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. Use - Download: http://lesscss.org/ - <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>