LESS is a dynamic stylesheet language that extends CSS syntax. It allows features like variables, mixins, nested rules, and functions to make CSS more powerful, flexible and maintainable. LESS code is compiled to regular CSS, allowing dynamic behavior and logic in stylesheets. Key features of LESS include variables to define constants, mixins to embed rule sets, nested rules to organize selectors, and operators to perform calculations for values.

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 LESS
stylesheet using regular CSS, and just add LESS code to the stylesheet as and
when you need it.

2. Processing
- The LESS compiler is written in JavaScript.
- The compiler converts your LESS code into CSS when the browser loads the
page
ProcessingProcessing

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

4. VariablesVariables
- 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

5. Variables (Cons)
Ex:
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 { color: @color; }
/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

6. MixinsMixins
- 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);
}

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. 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. 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. 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. UseUse
- Download: http://lesscss.org/
- <link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>