title: Bootstrap Responsive Margins & Padding Less/CSS
body: <p>I've created a series of CSS classes to easily manipulate the margins and padding of various elements. I've also utilized media queries to create responsive classes that only apply at certain screen widths. Everything appears to work as it should, but as you can see, my Less writing skills are extremely lacking and the code is huge!</p>
  
  <p>I know far less code could be used to output the required CSS, but all of my attempts to write the custom mixin's and loops have come up short.</p>
  
  <p>Is it possible to reduce this block of code to something a little slicker? Any help would be appreciated.</p>
  
  <p>Cheers!</p>
  
  <pre><code>// Margins and padding
  // -------------------------
  
  // Horizontal and vertical offset values
  @x-0:       0;
  @x-xs:      (@grid-gutter-width / 4);
  @x-sm:      (@grid-gutter-width / 2);
  @x-md:      @grid-gutter-width;
  @x-lg:      (@grid-gutter-width * 2);
  @x-xl:      (@grid-gutter-width * 4);
  
  @y-0:       0;
  @y-xs:      (@line-height-computed / 4);
  @y-sm:      (@line-height-computed / 2);
  @y-md:      @line-height-computed;
  @y-lg:      (@line-height-computed * 2);
  @y-xl:      (@line-height-computed * 4);
  
  // Static margins
  .mt-0  { margin-top: @y-0; }
  .mt-xs { margin-top: @y-xs; }
  .mt-sm { margin-top: @y-sm; }
  .mt-md { margin-top: @y-md; }
  .mt-lg { margin-top: @y-lg; }
  .mt-xl { margin-top: @y-xl; }
  
  .mr-0  { margin-right: @x-0; }
  .mr-xs { margin-right: @x-xs; }
  .mr-sm { margin-right: @x-sm; }
  .mr-md { margin-right: @x-md; }
  .mr-lg { margin-right: @x-lg; }
  .mr-xl { margin-right: @x-xl; }
  
  .mb-0  { margin-bottom: @y-0; }
  .mb-xs { margin-bottom: @y-xs; }
  .mb-sm { margin-bottom: @y-sm; }
  .mb-md { margin-bottom: @y-md; }
  .mb-lg { margin-bottom: @y-lg; }
  .mb-xl { margin-bottom: @y-xl; }
  
  .ml-0  { margin-left: @x-0; }
  .ml-xs { margin-left: @x-xs; }
  .ml-sm { margin-left: @x-sm; }
  .ml-md { margin-left: @x-md; }
  .ml-lg { margin-left: @x-lg; }
  .ml-xl { margin-left: @x-xl; }
  
  // Responsive margins
  @media (max-width: @screen-xs-max) {
      .mt-0-sm  { margin-top: @y-0; }
      .mt-xs-sm { margin-top: @y-xs; }
      .mt-sm-sm { margin-top: @y-sm; }
      .mt-md-sm { margin-top: @y-md; }
      .mt-lg-sm { margin-top: @y-lg; }
      .mt-xl-sm { margin-top: @y-xl; }
  
      .mr-0-sm  { margin-right: @x-0; }
      .mr-xs-sm { margin-right: @x-xs; }
      .mr-sm-sm { margin-right: @x-sm; }
      .mr-md-sm { margin-right: @x-md; }
      .mr-lg-sm { margin-right: @x-lg; }
      .mr-xl-sm { margin-right: @x-xl; }
  
      .mb-0-sm  { margin-bottom: @y-0; }
      .mb-xs-sm { margin-bottom: @y-xs; }
      .mb-sm-sm { margin-bottom: @y-sm; }
      .mb-md-sm { margin-bottom: @y-md; }
      .mb-lg-sm { margin-bottom: @y-lg; }
      .mb-xl-sm { margin-bottom: @y-xl; }
  
      .ml-0-sm  { margin-left: @x-0; }
      .ml-xs-sm { margin-left: @x-xs; }
      .ml-sm-sm { margin-left: @x-sm; }
      .ml-md-sm { margin-left: @x-md; }
      .ml-lg-sm { margin-left: @x-lg; }
      .ml-xl-sm { margin-left: @x-xl; }
  }
  @media (max-width: @screen-sm-max) {
      .mt-0-md  { margin-top: @y-0; }
      .mt-xs-md { margin-top: @y-xs; }
      .mt-sm-md { margin-top: @y-sm; }
      .mt-md-md { margin-top: @y-md; }
      .mt-lg-md { margin-top: @y-lg; }
      .mt-xl-md { margin-top: @y-xl; }
  
      .mr-0-md  { margin-right: @x-0; }
      .mr-xs-md { margin-right: @x-xs; }
      .mr-sm-md { margin-right: @x-sm; }
      .mr-md-md { margin-right: @x-md; }
      .mr-lg-md { margin-right: @x-lg; }
      .mr-xl-md { margin-right: @x-xl; }
  
      .mb-0-md  { margin-bottom: @y-0; }
      .mb-xs-md { margin-bottom: @y-xs; }
      .mb-sm-md { margin-bottom: @y-sm; }
      .mb-md-md { margin-bottom: @y-md; }
      .mb-lg-md { margin-bottom: @y-lg; }
      .mb-xl-md { margin-bottom: @y-xl; }
  
      .ml-0-md  { margin-left: @x-0; }
      .ml-xs-md { margin-left: @x-xs; }
      .ml-sm-md { margin-left: @x-sm; }
      .ml-md-md { margin-left: @x-md; }
      .ml-lg-md { margin-left: @x-lg; }
      .ml-xl-md { margin-left: @x-xl; }
  }
  @media (max-width: @screen-md-max) {
      .mt-0-lg  { margin-top: @y-0; }
      .mt-xs-lg { margin-top: @y-xs; }
      .mt-sm-lg { margin-top: @y-sm; }
      .mt-md-lg { margin-top: @y-md; }
      .mt-lg-lg { margin-top: @y-lg; }
      .mt-xl-lg { margin-top: @y-xl; }
  
      .mr-0-lg  { margin-right: @x-0; }
      .mr-xs-lg { margin-right: @x-xs; }
      .mr-sm-lg { margin-right: @x-sm; }
      .mr-md-lg { margin-right: @x-md; }
      .mr-lg-lg { margin-right: @x-lg; }
      .mr-xl-lg { margin-right: @x-xl; }
  
      .mb-0-lg  { margin-bottom: @y-0; }
      .mb-xs-lg { margin-bottom: @y-xs; }
      .mb-sm-lg { margin-bottom: @y-sm; }
      .mb-md-lg { margin-bottom: @y-md; }
      .mb-lg-lg { margin-bottom: @y-lg; }
      .mb-xl-lg { margin-bottom: @y-xl; }
  
      .ml-0-lg  { margin-left: @x-0; }
      .ml-xs-lg { margin-left: @x-xs; }
      .ml-sm-lg { margin-left: @x-sm; }
      .ml-md-lg { margin-left: @x-md; }
      .ml-lg-lg { margin-left: @x-lg; }
      .ml-xl-lg { margin-left: @x-xl; }
  }
  
  // Static padding
  .pt-0  { padding-top: @y-0; }
  .pt-xs { padding-top: @y-xs; }
  .pt-sm { padding-top: @y-sm; }
  .pt-md { padding-top: @y-md; }
  .pt-lg { padding-top: @y-lg; }
  .pt-xl { padding-top: @y-xl; }
  
  .pr-0  { padding-right: @x-0; }
  .pr-xs { padding-right: @x-xs; }
  .pr-sm { padding-right: @x-sm; }
  .pr-md { padding-right: @x-md; }
  .pr-lg { padding-right: @x-lg; }
  .pr-xl { padding-right: @x-xl; }
  
  .pb-0  { padding-bottom: @y-0; }
  .pb-xs { padding-bottom: @y-xs; }
  .pb-sm { padding-bottom: @y-sm; }
  .pb-md { padding-bottom: @y-md; }
  .pb-lg { padding-bottom: @y-lg; }
  .pb-xl { padding-bottom: @y-xl; }
  
  .pl-0  { padding-left: @x-0; }
  .pl-xs { padding-left: @x-xs; }
  .pl-sm { padding-left: @x-sm; }
  .pl-md { padding-left: @x-md; }
  .pl-lg { padding-left: @x-lg; }
  .pl-xl { padding-left: @x-xl; }
  
  // Responsive padding
  @media (max-width: @screen-xs-max) {
      .pt-0-sm  { padding-top: @y-0; }
      .pt-xs-sm { padding-top: @y-xs; }
      .pt-sm-sm { padding-top: @y-sm; }
      .pt-md-sm { padding-top: @y-md; }
      .pt-lg-sm { padding-top: @y-lg; }
      .pt-xl-sm { padding-top: @y-xl; }
  
      .pr-0-sm  { padding-right: @x-0; }
      .pr-xs-sm { padding-right: @x-xs; }
      .pr-sm-sm { padding-right: @x-sm; }
      .pr-md-sm { padding-right: @x-md; }
      .pr-lg-sm { padding-right: @x-lg; }
      .pr-xl-sm { padding-right: @x-xl; }
  
      .pb-0-sm  { padding-bottom: @y-0; }
      .pb-xs-sm { padding-bottom: @y-xs; }
      .pb-sm-sm { padding-bottom: @y-sm; }
      .pb-md-sm { padding-bottom: @y-md; }
      .pb-lg-sm { padding-bottom: @y-lg; }
      .pb-xl-sm { padding-bottom: @y-xl; }
  
      .pl-0-sm  { padding-left: @x-0; }
      .pl-xs-sm { padding-left: @x-xs; }
      .pl-sm-sm { padding-left: @x-sm; }
      .pl-md-sm { padding-left: @x-md; }
      .pl-lg-sm { padding-left: @x-lg; }
      .pl-xl-sm { padding-left: @x-xl; }
  }
  @media (max-width: @screen-sm-max) {
      .pt-0-md  { padding-top: @y-0; }
      .pt-xs-md { padding-top: @y-xs; }
      .pt-sm-md { padding-top: @y-sm; }
      .pt-md-md { padding-top: @y-md; }
      .pt-lg-md { padding-top: @y-lg; }
      .pt-xl-md { padding-top: @y-xl; }
  
      .pr-0-md  { padding-right: @x-0; }
      .pr-xs-md { padding-right: @x-xs; }
      .pr-sm-md { padding-right: @x-sm; }
      .pr-md-md { padding-right: @x-md; }
      .pr-lg-md { padding-right: @x-lg; }
      .pr-xl-md { padding-right: @x-xl; }
  
      .pb-0-md  { padding-bottom: @y-0; }
      .pb-xs-md { padding-bottom: @y-xs; }
      .pb-sm-md { padding-bottom: @y-sm; }
      .pb-md-md { padding-bottom: @y-md; }
      .pb-lg-md { padding-bottom: @y-lg; }
      .pb-xl-md { padding-bottom: @y-xl; }
  
      .pl-0-md  { padding-left: @x-0; }
      .pl-xs-md { padding-left: @x-xs; }
      .pl-sm-md { padding-left: @x-sm; }
      .pl-md-md { padding-left: @x-md; }
      .pl-lg-md { padding-left: @x-lg; }
      .pl-xl-md { padding-left: @x-xl; }
  }
  @media (max-width: @screen-md-max) {
      .pt-0-lg  { padding-top: @y-0; }
      .pt-xs-lg { padding-top: @y-xs; }
      .pt-sm-lg { padding-top: @y-sm; }
      .pt-md-lg { padding-top: @y-md; }
      .pt-lg-lg { padding-top: @y-lg; }
      .pt-xl-lg { padding-top: @y-xl; }
  
      .pr-0-lg  { padding-right: @x-0; }
      .pr-xs-lg { padding-right: @x-xs; }
      .pr-sm-lg { padding-right: @x-sm; }
      .pr-md-lg { padding-right: @x-md; }
      .pr-lg-lg { padding-right: @x-lg; }
      .pr-xl-lg { padding-right: @x-xl; }
  
      .pb-0-lg  { padding-bottom: @y-0; }
      .pb-xs-lg { padding-bottom: @y-xs; }
      .pb-sm-lg { padding-bottom: @y-sm; }
      .pb-md-lg { padding-bottom: @y-md; }
      .pb-lg-lg { padding-bottom: @y-lg; }
      .pb-xl-lg { padding-bottom: @y-xl; }
  
      .pl-0-lg  { padding-left: @x-0; }
      .pl-xs-lg { padding-left: @x-xs; }
      .pl-sm-lg { padding-left: @x-sm; }
      .pl-md-lg { padding-left: @x-md; }
      .pl-lg-lg { padding-left: @x-lg; }
      .pl-xl-lg { padding-left: @x-xl; }
  }
  </code></pre>