less examples

gistfile1.html

<!-- ugly bootstrap classes in your html --> 
<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>


<!- our new, semanticized HTML -->
<article>
  <section class="main">...</section>
  <aside></aside>
</article>

less.css

/* main.less */
/*
 main.less should only contain global styles  ie  navigation, footer,
*/
@import url('variables.less');
@import url('bootstrap_mixins.less');

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

------------------------------------------------------------------------
/* var.less */
/*
var.less should contain  vars that are used throughout the whole entire site
It should only contain mixins and  vars no real styles should be created here.
*/
 @somevar = "red";
 @anothercolor = "#333";

------------------------------------------------------------------------
/* template.less */
/*
template.less should be duplicated to create new style sheets for pages.
*/
@import url('variables.less');
@import url('bootstrap_mixins.less');

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

style.css

<!-- its accompanying Less stylesheet -->
article {
  .makeRow();

  section.main {
    .makeColumn(10);
  }

  aside {
    .makeColumn(2);
  }
}