less

I am trying to create a mixin that dynamically defines variables in LESS CSS, by actually assigning them a composite name. The simplified use-case (not the real one): .define(@var){ @foo{var}: 0; } Then one would call the mixin as such: .define('Bar'){ @fooBar: 0; } Since this kind of string interpolation is possible while using selectors names, I was wondering if the same would be possible for variable names; so far, I have had no luck with various syntaxes I tried (other than the above, I tried escaping, quoting, using the ~ prefix and so on). Edit I just tried one more thing, and I feel I

I try to set up this LESS mixin for CSS animation keyframes: .keyframes(@name, @from, @to) {; @-webkit-keyframes "@name" { from { @from; } to { @to; } } } but there is some problem with name pharse, is there any option to do this corectly? As of LESS >= 1.7 you can use variables for keyframe keywords (names). Some changes have been made in LESS 1.7 to how directives work, which allows to use variables for the name/keyword of @keyframes (so the example from the question should work now). DEMO Unfortunately keyframes names can not be dynamically generated in LESS <= 1.6 Hence, the normal way of

Can anyone please tell me how to concatenate a var and a string in LESS so I don't have the space between them? I have the following code: .text(@size) { font-size: @size + px; line-height: (@size / 10) + em; } h1 { .text(16) } What the LESS outputs is the following: h1 { font-size: 12 px; line-height: 1.2 em; } I need to find a way to remove the spaces. Thanks Pete In case any late-comers find this thread: There is a built-in function for this: unit(@dimension, [@unit: ""]); So font-size: unit(@size, px); should result in font-size: 12px . I tested it. http://lesscss.org/#reference U can use

How do, using File Watchers in PHPStorm do I set up LESS file watchers output path to do this: I want: /project/path/less/dir/file.less to output to: /project/path/css/dir/file.css or /project/path/less/file2.less to output to: /project/path/css/file2.css I'm not seeing a clear way to make this happen with the Output Path macros in PHPstorm. With the FileDirRelativeToProjectRoot macro, I'm able to get the path to the current directory, but there is no clear way to replace /less with /css in the path. CrazyCoder See my related answer for JADE file watcher , I believe it would be the same for

After reading the new (unfinished) Bootstrap 3 docs I am wondering how to create semantic mobile grid. In short. How to convert this: <div class="row"> <div class="col col-lg-6 col-sm-6">6</div> <div class="col col-lg-6 col-sm-6">6</div> </div> To this and preserve the small mobile grid: <div class="wrapper"> <div class="left">6</div> <div class="right">6</div> </div> Less .wrapper { .make-row(); } .left { .make-column(6); // this creates only large grid } .right { .make-column(6); } Bass Jobsen If i understand your question well i think you should use: <div class="row"> <div class="col-span-6

I started using LESS today. But it's kinda weird. This code does not work. I get an error: ! Variable Name Error: @linkColor in a is undefined. My bootstrap: @import "variables.less"; @import "normalize.less"; variables.less: @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); normalize.less: a { color: @linkColor; } a:visited { color: @linkColor; } a:hover { color: @linkColorHover; } When I make an @import "variables.less" in the normalize.less file, everything works fine. Thanks for your help :) Chris Jaynes This other question ultimately led me to the right answer. It looks like the