If you’re to nail CSS, Less is more – part 3 : mixins, client and server side

So, we’re here. We now know how to create a neat Less file that will generate the CSS file we want, we know how to use variables, how to nest styling rules and how to set up the watch mode on our browser. We still have a couple of things to see before we start talking about the console and the Less compilation : we need to talk about mixins, client-side and server-side.

Mixins

This feature is awesome. Imagine if you could define styling rules not just as such, but as functions, with parameters. Less makes it possible.

For example, you might want to use rounded-cornered boxes here and there on your page, but with various corner-radius and different background-colors.  There’s an easy way to do that with less (and before you start screaming the hell out of me, the classnames i’ll be using in that example are just for the sake of the example, you should know i’m not that dumb) :

.rounded-box (@radius: 5px, @bgcolor: #000) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  background-color: @bgcolor;
}

.red_small_box {
  width: 200px;
  height: 200px;
  .rounded-box (4px, #c00);
}

.blue_huge_box {
  width: 800px;
  height: 800px;
  .rounded-box (16px, #99f);
}

don’t you like it when it’s just that easy ?

Server and client side

I know what you’re going to say : Less is CSS managed by Javascript, so it’s client managed. And, strangely, you are not that wrong. But let’s see what’s available for you.

Client side

Well, we’ve been doing that all along, so the basics are already known : if you want to use Less properly, you should load your .less (with the rel attribute set to stylesheet/less) files BEFORE loading your less.js file, within the <head> section of your page :

...
  <head>
    ...
    <link rel="stylesheet/less" type="text/css" src="path/to/my/file.less" />
    <script type="text/javascript" src="path/to/my/less.js"></script>
  </head>
...

But here’s a couple of things you don’t know yet (unless, of course, if you already do) :

you can set things on a global less object before you load the less.js script file :

<script type="text/javascript">
    less = {
        env: "development", // or "production"
        async: false,       // load imports async
        fileAsync: false,   // load imports async when in a page under
                            // a file protocol
        poll: 1000,         // when in watch mode, time in ms between polls
        functions: {},      // user functions, keyed by name
        dumpLineNumbers: "comments", // or "mediaquery" or "all"
        relativeUrls: false,// whether to adjust url's to be relative
                            // if false, url's are already relative to the
                            // entry less file
        rootpath: ":/a.com/"// a path to add on to the start of every url
                            //resource
    };
</script>

You can as well modify the content of your Less styles in run-time, using simple javascript within your page; for example, if you want to change a variable :

less.modifyVars({
  @bgcolor: #c0c0c0;
});

Since you can modify the styling at run-time, you might as well have fun with the console (console on Chrome and Safari, Firebug on Firefox, etc.).

Also, same way you can launch the watch mode using the URL suffix #!watch, you can add other options, such as : #!dumpLineNumbers:mediaQuery.

And that’s about it regarding the client side.

Server side

The server side is completely related to the Less compiler, and therefore will be talked about in the next post. See ya !

Les commentaires sont fermés.