Less theme example

by iamtimmo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.5.0/less.min.js"></script>
<div class="page page-theme-1">
    Look a box with shadow
    
    <button class="btn">A</button>
    <button class="btn btn-theme-2">B</button>
</div>

<div class="page page-theme-2">
    Look a box with shadow
    
    <button class="btn">A</button>
    <button class="btn btn-theme-1">B</button>
</div>

CSS

// Variables
@color1: red;
@color2: blue;

// Global Mixins
.text-color-variant(@text-color) {
    color: @text-color;
}
.btn-variant(@btn-color) {
    background-color: @btn-color;
}

// Page Mixins
.page-variant(@page-color) {
    .text-color-variant(@page-color);
    .btn {
        .btn-variant(@page-color);
    }
}

// Page themes
.page-theme-1 {
    .page-variant(@color1);
}
.page-theme-2 {
    .page-variant(@color2);
}

// Button themes
.btn {
    &.btn-theme-1 {
        .btn-variant(@color1);
    }
    &.btn-theme-2 {
        .btn-variant(@color2);
    }
}

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();