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!
Share Improve this question asked Jun 14, 2011 at 16:44 DMinDMin 10.4k10 gold badges48 silver badges65 bronze badges 3- 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
forbackground-color
orbgi
forbackground-image:url()
-- CSS is too long to write sometimes. – DMin Commented Jun 14, 2011 at 16:54
3 Answers
Reset to default 3Here'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>