Saturday, October 19, 2013

LESS Getting Started


Simple Note

Code

Actually this is a pure html case, the only reason that I put it in a Dynamic Web Project is that I want to use the exiting run-jetty-run plugin in my Eclipse since I am lazy to config a server for it.

less_test.html

Simple html page, declare less file and load less.js. Say 'declare' since the .less file seems loaded by less.js with AJAX instead of load by link directly.

<html>
    <head>
        <!--  include .less file, need to include it before less.js -->
        <link rel="stylesheet/less" type="text/css" href="resources/test.less" />
        <!-- include less.js, will compile .less file at client side -->
        <script src="resources/less-1.4.2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- nested div -->
        <div class="class1">
            <div class="class2">
                <div class="class3">
                    <div class="class4">
                        <div class="class5"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


test.less

Stylesheet written by LESS.

// use // to comment in less file only
// use /* */ to commment in less and compiled css
/* compiled css */
// define variable
@base-color: #EEEEEE;

// define Mixin behave like function
// parameter @dec with default value #111111
.box(@dec: #111111) {
    // border with calculated border color,
    // e.g., #EEEEEE - #111111*2 = #CCCCCC
    border: 10px solid (@base-color - @dec*2);
    display: inline-block;
}

// nest selectors inside other selectors
.class1 {
    .box; // include .box with default value of parameter
    .class2 { // .class1 .class2
        .box(#222222); // include .box with @dec = #222222
        .class3 { // .class1 .class2 .class3
            .box(#333333);
            .class4 { // .class1 .class2 .class3 .class4
                .box(#444444);
                .class5 { // .class1 .class2 .class3 .class4 .class5
                    .box(#555555);
                }
            }
        }
    }
}


And less.js downloaded from official site of LESS.

Result

Click to view large image



Reference

LESS
http://lesscss.org/

Download

Full project at github
https://github.com/benbai123/JSP_Servlet_Practice/tree/master/Practice/LESS/GettingStarted

No comments:

Post a Comment