title: How to write reusable classes in css
body: <p>This isn't a question of such, rather i just want to know rather my understanding on reusable class in CSS is correct. In this example, I have 2 divs. and i want to add a padding-left to both, but with different values. (e.g. div one has a padding left of 10px, and div2 and padding left of 15px). So Now I want to write reusable css classes, with the help of a less function.</p>
  
  <p><strong>example1</strong></p>
  
  <pre><code>&lt;div id="div1" class="small-left-space"&gt;
  &lt;/div&gt;
  
  &lt;div id="div2" class="large-left-space"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>//css and less</p>
  
  <pre><code>.padLeft(@value)
  {
     padding-left: @value;
  }
  
  .small-left-space{
    .padLeft(10px);
   }
  
  
  .large-left-space{
    .padLeft(100px);
   }
  </code></pre>
  
  <p><strong>example 2</strong></p>
  
  <p>Html</p>
  
  <pre><code>&lt;div id="box1" class="bigBox redBackground smallLeftSpace "&gt;&lt;/div&gt;
  
  &lt;div id="box2" class="mediumBox blueBackground mediumLeftSpace"&gt;&lt;/div&gt;
  
  &lt;div id="box3" class="smallBox greenBackground largeLeftSpace"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS/Less</p>
  
  <pre><code>  .bigBox
   {
     width: 500px;
     height:500px;
   }
  
  .mediumBox{
      width:300px
      height:300px;
  }
  
  .smallBox{
     width:100px
     height:100px;
  }
  
  .redBackground{
     .backgroundColor(red);
  }
  
  .blueBackground{
     .backgroundColor(blue); 
  }
  
  .greenBackground{
      .backgroundColor(green);
  }
  
  .smallLeftSpace{
       margin-left: 20px;
  }
  
  .mediumLeftSpace{
      margin-left: 50px;
  }
  
  .largeLeftSpace{
      margin-left: 100px;
  }
  
  .backgroundColor(@value){
     background-color: @value;
  }
  </code></pre>