Is there a way to use JavaScript inside a LESS CSS file..?

What I am currently doing is this :

.f(@l) {
 float: @l;
}

#header {
 .f(left);
}

What I am trying to achieve is something like this.

.f(@l) {
   // use switch or JS function to figure out what @l is and use that.
   // for example in this case it could be "l" = left - "r" = right - "n" = none(...)
 float: @l;
}

#header {
 .f(l);
}

It would be cool even if we could put JS code in the less.js file and then be able to execute it from the .less file (Source)

As a sidenote, I use jQuery on this page as well, if there are any plugins/hacks using it, those are wele as well. Thanks!

Is there a way to use JavaScript inside a LESS CSS file..?

What I am currently doing is this :

.f(@l) {
 float: @l;
}

#header {
 .f(left);
}

What I am trying to achieve is something like this.

.f(@l) {
   // use switch or JS function to figure out what @l is and use that.
   // for example in this case it could be "l" = left - "r" = right - "n" = none(...)
 float: @l;
}

#header {
 .f(l);
}

It would be cool even if we could put JS code in the less.js file and then be able to execute it from the .less file (Source)

As a sidenote, I use jQuery on this page as well, if there are any plugins/hacks using it, those are wele as well. Thanks!

• javascript
• css
• less

• 1 Sounds a lot like IE behaviors and expressions. – BoltClock Commented Jun 14, 2011 at 16:46
• 1 I didn't know that LESS was intended to make your CSS unreadable... ;) – Guffa Commented Jun 14, 2011 at 16:48
• LOL! :) I am trying to use zen-html/css like convention to make css shorter and easier to write. Something like bgc for background-color or bgi for background-image:url() -- CSS is too long to write sometimes. – DMin Commented Jun 14, 2011 at 16:54

3 Answers 3

Here's how you can use ternary operator in a simple expression

// add extra width if @miniPlayButton is true
@extraWidth: ~`('@{miniPlayButton}' == 'true' ? 1 : 0)`;

width: 2em + unit(@extraWidth, em);

Remember regular Javascript doesn't know about units like em so I find it easier (and clearer) to do something like this.

If there is a better reference for similar simple 'recipes' please post it.

I am running this server side with .NET BundleTransformer. Needed to add javasriptEnabled or else you get the error message "Syntax Message: You are using JavaScript, which has been disabled."

  <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" 
        javascriptEnabled="true" >
    <jsEngine name="MsieJsEngine" />
  </less>

You can embed javascript in your lesscss files (with backticks) details here:

http://lesscss/#-javascript-evaluation

Edit: if that link takes you to the top of the page (as it does for me sometimes) search/scroll down to the section titled "Javascript Evaluation"

Can you bine jQuery templates with dynamic stylesheets.

So in your example you could define something like

<script type="text/x-jquery-tmpl" id="dynstyles">
.f(${l}) {
  float: ${l};
}

#header {
  .f(left);
}
</script>
<script>
document.write(
    "<style>",
    $.template("#dynstyles").tmpl({ l: "left" }),
    "</style>");
</script>