my favorite

2010/07/25

Lessjs : vary your css

Origin : http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

step 1 : arrange less file and less.js

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

step 2 : write code
@brand-color: #3879BD;

.rounded(@radius: 3px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded(5px);
    a {
        color: @brand-color;
        &:hover {
            color: #000;
        }
    }
}

** make sure your less file is arranged before the less.js to tell less.js watch your less file.

Demo

lesscss.org

No comments:

BIO

Taipei, GuTing, Taiwan

huang47 | personal

huang47 | personal