less

I've just started using LESS and I love it. I'm now looking into grid.less which creates grids using LESS semantics. This enables me to do something like this //css .mydiv { .column(9); } //html <div class="mydiv"> 9 column wide</div> I've not studied less.js , but is there somehow possible to do the following: //html <div class="column(9)"> 9 column wide</div> Is there any way to achieve this? LESS cannot easily read a parameter from the HTML, as LESS is a preprocessor (it processes the CSS before anything is presented in HTML). However, you can prebuild classes that will essentially do the

LESS code .foo { background-size: 200px; //for old browsers background-size: cover; } CSS expected .foo { background-size: 200px; background-size: cover; } but less.js remove the first background-size property in compiled CSS file. AS already pointed out by @seven-phases-max clean-css removes these properties. Notice that the --advanced has been set by default. You should use the --skip-advanced option to prevent your double properties from being removed. According to https://github.com/less/less-plugin-clean-css the advanced option has been set to false by default. lessc foo.less outputs:

Ultimately I'm trying to accomplish the following styles with LESS. <div class="filter btn-group"> <button class="btn btn-default" type="button" data-filter="*">show all</button> <button class="btn btn-default" type="button" data-filter=".cd">CD</button> <button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button> </div> I have the following HTML <div class="filter"> <button type="button" data-filter="*">show all</button> <button type="button" data-filter=".cd">CD</button> <button type="button" data-filter=".vinyl">Vinyl</button> </div> And I have this in a LESS file with

I am a newbie, so be gentle. I am sure my terminology is incorrect too: suppose I have my own jumbotron override: .jumbotron { background-color: #ff4400; } and then I want to have a custom override of that where I inherit the above class and only override its background color using its color as a parameter to "lighten()". I can't figure out the syntax: .Myjumbotron { .jumbotron; /* not sure what goes below for "parent.background-color" */ background-color: lighten(parent.background-color, 30%); } Harry LESS allows you to define variables. So you can define a variable for the parent's color and

I was wondering if it's possible to create a LESS mixin that I could use like this: .transform(transition, .5s, ease-out); and has this CSS as output: -webkit-transition: -webkit-transform .5s ease-out; -moz-transition: -moz-transform .5s ease-out; transition: transform .5s ease-out; but I would also be able to use the same mixin for other properties (i.e. .transition(opacity, .5s) should output to -webkit-transition:opacity .5s; -moz-transition:opacity .5s; transition:opacity .5s; Thanks! Leon Since Less version 2 you can use the autoprefix postprocessor plugin and the consensus is that you

I am using the Less parent selector to shorten my selectors: .module-name { // styles go here &__sub-module-1 { //styles go here } } Now my problem is how to continue to use the parent selector for adding the module-name inside a nested :hover statement. E.g. on hover of sub-module-1 I want to change something in sub-module-2. Inside the &:hover statement, what does the parent selector refer to? .module-name { &__sub-module1 { &:hover { &__sub-module2 { // on hover of .module-name__sub-module1 change something in .module-name__sub-module2 } } } } If i write it like this it works, but it

I'm using an specific mixin trying to make my code more clear. So instead of using: <div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"> I'm using: <div class="stackOverflowRocksIt"> and in my mixins.less: .stackOverflowRocksIt{ .make-lg-column(3); .make-md-column(4); .make-sm-column(6); .make-xs-column(12); } It works properly with XS and SM viewports, but not when I resize to MD or LG (then is taking the SM size). Is this the proper way to create columns for different viewports sizes? Any idea? You should re-order your mixin calls: .stackOverflowRocksIt { .make-xs-column(12); .make-sm-column(6

Since version 2 of Less you can use plugins . You can also use these plugins to add custom function to Less, examples: https://github.com/less/less-plugin-advanced-color-functions/ and https://github.com/bassjobsen/less-plugin-cubehelix Inspired on https://github.com/less/less.js/issues/2341 i want to add a custom function twotimesandten to less, so that: @start: 10; .test { result: twotimesandten(@start); } compiles into: .test { result: 30; } After reading http://lesscss.org/usage/#plugins-for-plugin-authors , i wonder how to do this? First write the plugin for usage in the browser . You