less

Double border with different color [duplicate]

Alternatively, you can use pseudo-elements to do so 🙂 the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup: body { background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); background-repeat: no-repeat; … Read more

Loop over an array of name value pairs in LESS

The answer given by @seven-phases-max works very well. For completeness you should also notice that you can do the same in Less without the imported “for” snippet. from lesscss.org In trying to stay as close as possible to the declarative nature of CSS, Less has opted to implement conditional execution via guarded mixins instead of … Read more

How to thematize in lesscss

It all depends on how many styles and variables differ between themes, for example a (very) basic staring point could be something like: @themes: blue rgb( 41, 128, 185), marine rgb( 22, 160, 133), green rgb( 39, 174, 96), orange rgb(211, 84, 0), red rgb(192, 57, 43), purple rgb(142, 68, 173); // usage: #navBar { … Read more

Using variables in property names in LESS (dynamic properties / property name interpolation)

Update: LESS >= 1.6 As of version 1.6 (see changelog) property name interpolation is implemented in LESS. So you don’t need any magic anymore. (For older versions, see my original answer.) Your mixin would work basically as is: LESS: .vendor(@property; @value){ -webkit-@{property}: @value; -moz-@{property}: @value; -ms-@{property}: @value; -o-@{property}: @value; @{property}: @value; } /*example*/ .test { … Read more

Is there a SASS.js? Something like LESS.js?

There is no officially sanctioned JavaScript implementation of sass or scss. There are a couple of implementations in progress that I’ve seen, but none that I can recommend using at this time. However, please a few points: Why should you make all your users compile your stylesheets when you can do it once for all … Read more

Loop through array of variable names in Less

See Loops. For example (assuming @green, @red, @blue variables are defined elsewhere): @colors: green, red, blue; .example_module { .-(@i: length(@colors)) when (@i > 0) { @name: extract(@colors, @i); &.@{name} {background: @@name} .-((@i – 1)); } .-; } – – – In Modern Less the same can be more straight-forward with the help of the Lists … Read more

How to namespace Twitter Bootstrap so styles don’t conflict

This turned out to be easier than I thought. Both Less and Sass support namespacing (using the same syntax even). When you include bootstrap, you can do so within a selector to namespace it: .bootstrap-styles { @import ‘bootstrap’; } Update: For newer versions of LESS, here’s how to do it: .bootstrap-styles { @import (less) url(“bootstrap.css”); … Read more

Disable LESS-CSS Overwriting calc() [duplicate]

Using an escaped string (a.k.a. escaped value): width: ~”calc(100% – 200px)”; Also, in case you need to mix Less math with escaped strings: width: calc(~”100% – 15rem +” (10px+5px) ~”+ 2em”); Compiles to: width: calc(100% – 15rem + 15px + 2em); This works as Less concatenates values (the escaped strings and math result) with a … Read more