It seams to be a difference between e(“A, B, C”) or ~”A, B, C” and A, B, C Yes, both e(“A, B, C”) and ~”A, B, C” create so-called “anonymous value” type which is never considered as a meaningful type (it’s not a list, not a number, not even a string). Basically an escaped values … Read more
As already mentioned your attempt is almost there, it does not work because of variable visibility rules. Notice that each .selector-list iteration defines new @selector-list variable which have higher precedence in the current scope but does not override @selector-list variables for the outer scope (i.e. scopes of the previous .selector-list iterations and above). So when … Read more
update jan 2014 See also: https://github.com/twbs/bootstrap/issues/10203 update 21 aug 2013 Since Twitter Bootstrap 3 RC2 the col-* mentioned below has been renamed to xs-col-* There are four grid classes now: xs-col-* (mobile, never stacks), col-sm-* (tablet, stacks below 768px), col-md-* (laptops,stacks below 992 px) and col-lg-* (desktop, stacks below 1200px). update In my previous answer … Read more
THIS ASSUMES LESSPHP v0.3.8+ Unsure about earlier versions, but you’ll get the gist of how it works if it doesn’t straight out of the box. <link rel=”stylesheet” type=”text/css” href=”https://stackoverflow.com/questions/12274628/styles/main.less” /> If you were using less.js to compile client side, make sure you change rel=”stylesheet/less” to rel=”stylesheet” 1) Grab Lessphp I placed these files in /www/compilers/lessphp/ … Read more
This method is for an older version of Bootstrap – Version 2.3.1 Click this link to customize bootstrap: http://twitter.github.com/bootstrap/customize.html You will find examples such as this. Change the parameters to fit your needs. 16 Grid system with Gutter @gridColumns: 16 @gridColumnWidth: 45px @gridGutterWidth: 15px @gridColumnWidth1200: 52.5px @gridGutterWidth1200: 22.5px @gridColumnWidth768: 31.5px @gridGutterWidth768: 15px 16 Grid system … Read more
Use interpolation and escaping, parentheses in the selector and parametric mixins to get the desired effect: Dynamic variables by interpolation: In a string, “@{variable}” is replaced with the value of the variable. They can also be nested: Given @{@{var}-foo} and @var: bar;, the result is “barfoo”. The resulting value is quoted. To remove these quotes, … Read more
Well, no, you can’t use class name to determine a variable or a return value. So it’s usually done in reverse, for example like this: @brand-default: #649d84; @brand-africa: #df6f20; @brand-nz: #444444; h1 { .brand-colors(); } h2 { .brand-colors(background-color); } .brand-colors(@property: color) { .color(default); .color(africa); .color(nz); .color(@name) { .brand-@{name} & { @value: ‘brand-@{name}’; @{property}: @@value; } … Read more
I just pushed 1.0.31 — it has a method: less.refreshStyles() which will re-compile <style> tags with type=”text/less” — try it out and let me know if it works.
That’s LESS, not CSS. This syntax allows you to nest selector modifiers. .clearfix { &:before { content: ”; } } Will compile to: .clearfix:before { content: ”; } With the &, the nested selectors compile to .clearfix:before. Without it, they compile to .clearfix :before.
You can force a file to be interpreted as a particular type by specifying an option, e.g.: @import (css) “lib”; will output @import “lib”; and @import (less) “lib.css”; will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.