Why less?

426 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
426
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Why less?

  1. 1. What is LESS?What is LESS?What is LESS?- LESS=The dynamic stylesheet language.- LESS extends the standard CSS syntax. This means that you can create a LESSstylesheet using regular CSS, and just add LESS code to the stylesheet as andwhen you need it.
  2. 2. Processing- The LESS compiler is written in JavaScript.- The compiler converts your LESS code into CSS when the browser loads thepageProcessingProcessing
  3. 3. Why LESS?Why LESS?- LESS has everything that CSS is missing.- Features:1- Variables2- Mixins3- Nested rules4- Operators and functions
  4. 4. VariablesVariables- When you program you can set a constant variable that you can access throughoutyour program.- You can do the same with LESS. Set a variable named @red, add your favoritehex red color and use it in your stylesheet.- Wanna change the color a bit? Just change the @red value and smile
  5. 5. Variables (Cons)Ex:// LESS@color: #4D926F;#header {color: @color;}h2 { color: @color; }/* Compiled CSS */#header {color: #4D926F;}h2 {color: #4D926F;}
  6. 6. MixinsMixins- allow you to embed all the properties of a class into another class by simplyincluding 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);}
  7. 7. /* 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;}
  8. 8. Nested rulesNested 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!
  9. 9. 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;}
  10. 10. Operators and functionsOperators 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;}
  11. 11. UseUse- Download: http://lesscss.org/- <link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

×