playingWithLess

by not important

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="srv disabled">
    <div class="srv-icon mailchimp">
    </div>
</div>
<div class="srv">
    <div class="srv-icon srv-icon-md mailchimp">
    </div>
</div>
<div class="srv">
    <div class="srv-icon srv-icon-md github">
    </div>
</div>
<div class="srv">
    <div class="srv-icon srv-icon-lg github">
    </div>
</div>

CSS

@srv-icon-medium: 30px;
@srv-icon-large: 80px;
@srv-icon-base: 44px;

.srv-icon {
    width: @srv-icon-base;
    height: @srv-icon-base;
    margin-bottom: 10px;
    background-image: url(https://app.datahero.com/images/sprites/services_44px.png);
    background-position: 0 0;
    
    &.srv-icon-md {
        height: @srv-icon-medium;
        width: @srv-icon-medium;
        background-image: url(https://app.datahero.com/images/sprites/services_30px.png);
    }
    
    &.srv-icon-lg {
        height: @srv-icon-large;
        width: @srv-icon-large;
        background-image: url(https://app.datahero.com/images/sprites/services_80px.png);
    }
}

.srv-position-background(@iconSize, @xOffset,@yIndex) {
    background-position: (@xOffset * @iconSize) -(@yIndex * @iconSize);
}

.make-srv-item(@serviceName, @bsIndex, @mdIndex, @lgIndex) {
    .srv-icon.@{serviceName} {
        .srv-position-background(@srv-icon-base, 0, @bsIndex);

        &.srv-icon-md {
            .srv-position-background(@srv-icon-medium, 0, @mdIndex);
        }
        &.srv-icon-lg {
            .srv-position-background(@srv-icon-large, 0, @lgIndex);
        }
    }

    .srv:hover .srv-icon.@{serviceName} {
        .srv-position-background(@srv-icon-base, 1, @bsIndex);

        &.srv-icon-md {
            .srv-position-background(@srv-icon-medium, 1, @mdIndex);
        }
        &.srv-icon-lg {
            .srv-position-background(@srv-icon-large, 1, @lgIndex);
        }
    }

    .srv.disabled .srv-icon.@{serviceName} {
        .srv-position-background(@srv-icon-base, -1, @bsIndex);

        &.srv-icon-md {
            .srv-position-background(@srv-icon-medium, -1, @mdIndex);
        }
        &.srv-icon-lg {
            .srv-position-background(@srv-icon-large, -1, @lgIndex);
        }
    }
}

.make-srv-item(mailchimp, 7, 7, 7);
.make-srv-item(github, 9, 9, 9);

JavaScript

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