LESS a Dynamic CSS

• Variable
  In LESS, variables are declared using the @ symbol. You just need to provide two attributes after this symbol:
  1. - Name (Color)
  2. - Value (#6e6e6e)
  3. @Color: #6e6e6e;
  Demo Snippet
  1. .Square
  2. {
  3. display: inline-block;
  4. margin: 25px;
  5. height: 200px;
  6. width: 200px;
  7. padding: 1px;
  8. background: @Color;
  9. }
  Using this method now you can make any number of changes in your application without changing the color script tag again and again. Through LESS you must only change the place of the default declaration and bang, you will see the magic.
• Mixins
  LESS provides some extended functionality such as drawing shapes, diagrams, defining border margins and so on that was not possible with even CSS3. This extended functionality is provided by several add-ons or prefixes in LESS, these are -webkit-, -moz-, -fa- and so on.
  So our functionality goes something like this:
  1. #S1
  2. {
  3. -moz-border-radius: 550px;
  4. -webkit-border-radius:550px;
  5. border-radius: 550px;
  6. }
  (It will turn the first shape into a circle.)
  Mixins are also of 2 types, based on the parameters:
  
• Operations
  In order to use mathematical operations in your web application, you are always welcome to use LESS in your application. LESS provides you this freedom.
  You can use mathematical operators in your style sheet by simply declaring a variable. I'll show you how easily you can do that.
  1. Here's a demo snippet:
  2. @SquareWidth: 100px;
  3. @Border: @SquareWidth * 0.1;
  (This will add some border to the shapes.)
  You can use these types of operations for your web pages simply using LESS functionality without any headache.
• Color Functions
  Are you guessing about this functionality, such as what it's going to create for you, or it's a functionality by its name? If yes then let's see how close you were.
  LESS provides certain sets of color functions that can be used in web applications to make them more effective and dynamic. These color functions are as follows:
  
  So are you ready to mingle with these functions?
  Let's explore them.
  Darken() and Lighten()
  These functions help in adding some black and white effects in your text, picture, shape and so on, respectively.
  Saturate() and Desaturate()
  These functions help in making your text, picture, shape and so on more colorful or taking them more near to a grayscale respectively.
  fadeIn() and FadeOut()
  These functions are used for increasing or decreasing transparency in your web application.
  Spin()
  It is used for modifying the hue of the color, used in your application.
• Nested Rule
  Now imagine a scenario in which you are designing a complex page using CSS. In which you are using many chain selectors in order to reach the desired page view.
  Something like this:
  1. #header
  2. /* Main #header Style*/
  3. {
  4. h1
  5. {
  6. /* #header h1 Style */
  7. }
  8. .
  9. .
  10. .
  11. {
  12. .
  13. .
  14. .
  15. }
  17. }
  Now does this seem more cool and artistic? If yes then the choice is yours and if no then let's create a world of possibilities with LESS nested rules.

• Makes styling easier
• Easy to handle
• It's nothing but a CSS Preprocessor
• Can be called “Dynamic CSS" too
• You can use any of the methods to use its functionality in your web page.
• Works more effectively than CSS
• Decreases nesting complexities
• You can use mathematical operators in it
• MIXins for advanced functionality
• Color Functions, for making your page much more adaptive and stylish

Summary