JSFiddle - React, Tailwind, and code Playground

by belthasar

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<div class="alert alert-olive">
    Olive
</div>


<div class="alert alert-pink">
    Pink
</div>


<div class="alert alert-yellowish">
    Yellowish
</div>


<div class="alert alert-gray">
    Gray
</div>

CSS

.alert-custom(@backgroundColor) {
  background-color: @backgroundColor;
  border-color: darken(spin(@backgroundColor, -10), 3%);
  color: darken(@backgroundColor, 47%);
}

.alert-olive {
   .alert-custom(#DCE2CF); 
}

.alert-pink{
   .alert-custom(#EDD9DA);
}

.alert-yellowish{
   .alert-custom(#F1F1DD);
}

.alert-gray{
   .alert-custom(#9C9FA1);
}

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();