CodePen

HTML

            
              <!-- Remove theme by removing ".theme-2" class -->
<body class="theme-2">
  <h2>Themed text</h2>
  <article class="box"><p>Themed box</p></article>
  <article class="box"><p>Themed box</p></article>
  <article class="box"><p>Themed box</p></article>
</body>
            
          
!

CSS

            
              //////////////////////////////////////////////////////
// CONSTANTS

@lightColour: #fff;
@darkColour: #000;
@lightBg: #fff;
@darkBg: #000;

//////////////////////////////////////////////////////
// MIXINS

.theme(@c1: #f00, @c2: #fff, @c3: #f00, @c4: #fff) {
  @lightColour: @c1;
  @darkColour: @c2;
  @lightBg: @c3;
  @darkBg: @c4;
}

.curvy {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//////////////////////////////////////////////////////
// GENERAL STYLING

* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}

.box {
  .curvy;
  color: @lightColour;
  background: @darkBg;
  display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}

//////////////////////////////////////////////////////
// THEME 2

.theme-2 { 
  .theme(#fff, #f00, #fff, #f00);
  color: @lightColour;
  background: @darkBg; 
  
  .box {
    color: @darkColour;
    background: @lightBg;
  }
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................