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