LESS CSS Android Robot

Showing the power of LESS CSS

by BoxMan0617

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div id="wrapper">
    <div id="head">
        <div id="eye-l" class="eye"></div>
        <div id="eye-r" class="eye"></div>
        <div id="antenna-l" class="antenna"></div>
        <div id="antenna-r" class="antenna"></div>
    </div>
    <div id="body"></div>
    <div id="arm-l" class="arm"></div>
    <div id="arm-r" class="arm"></div>
    <div id="leg-l" class="leg"></div>
    <div id="leg-r" class="leg"></div>
</div>

CSS

@green: #a5c63b;
@wrapper-width: 300px;
@wrapper-height: 400px;
@leg-width: 40px;
@leg-height: 60px;
@body-height: 170px;
@body-width: ((@leg-width * 4) + 25px);
@eye: 100%;
@eyeSize: 15px;

.roundCorners (@tL: 5px, @tR: 5px, @bL: 5px, @bR: 5px) {
    border-radius: @tL @tR @bL @bR;
    -webkit-border-radius: @tL @tR @bL @bR;
    -moz-border-radius: @tL @tR @bL @bR;
    -ms-border-radius: @tL @tR @bL @bR;
    -o-border-radius: @tL @tR @bL @bR;
}

.center {
    margin-left: ((((@leg-width * 4) + 25px) / 2) * -1);
    left: 50%;
}

.rotateMe (@deg: 50deg) {
    transform: rotate(@deg);
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}

#wrapper {
    width: @wrapper-width;
    height: @wrapper-height;
    position: relative;
    #body, .leg, .arm, .antenna, #head {
        background: @green;
        position: absolute;
    }
    #head {
        @head: 160px;
        .roundCorners(@head, @head, 0, 0);
        width: @body-width;
        height: 85px;
        .center;
        bottom: (@leg-height + @body-height + 10px);
        .antenna {
            height: 35px;
            width: 5px;
            @r: 30px;
            .roundCorners(@r, @r, 0, 0);
            top: -25px;
        }
        @degrees: 35deg;
        @antOffset: -10px;
        #antenna-l {
            .rotateMe((@degrees * -1));
            right: 50%;
            margin-right: (((@eyeSize / 2) * -1) + (@body-width / 4) - @antOffset);
        }
        #antenna-r {
            .rotateMe(@degrees);
            left: 50%;
            margin-left: (((@eyeSize / 2) * -1) + (@body-width / 4) - @antOffset);
        }
        .eye {
            .roundCorners(@eye, @eye, @eye, @eye);
            background: #FFFFFF;
            width: @eyeSize;
            height: @eyeSize;
            position: absolute;
            top: 50%;
            margin-top: ((@eyeSize / 2) * -1);
        }
        @eyeOffset: 5px;
        #eye-l...

JavaScript

/*

    While we are waiting for JSFiddle to support LESS integration I figured
    I would get a work around sorted so I can still write it in here
    
    Twitter: @aaronlayton
*/

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

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

/* 
    You could put this as a oneliner and use it as a shim for JSFiddle

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