Here is what I’ve done in my projects: @desktop: ~”only screen and (min-width: 960px) and (max-width: 1199px)”; @tablet: ~”only screen and (min-width: 720px) and (max-width: 959px)”; @media @desktop { footer { width: 940px; } } @media @tablet { footer { width: 768px; } } This allows you to only define your media queries once and … Read more
Yes, Less.js introduced extend in v1.4.0. :extend() Rather than implementing the at-rule (@extend) syntax used by SASS and Stylus, LESS implemented the pseudo-class syntax, which gives LESS’s implementation the flexibility to be applied either directly to a selector itself, or inside a statement. So both of these will work: .sidenav:extend(.nav) {…} or .sidenav { &:extend(.nav); … Read more
You can escape the calc arguments in order to prevent them from being evaluated on compilation. Using your example, you would simply surround the arguments, like this: calc(~’100% – 10px’) Demo : http://jsfiddle.net/c5aq20b6/ I find that I use this in one of the following three ways: Basic Escaping Everything inside the calc arguments is defined … Read more
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.
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
The & character has the function of a this keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write: .class1 { &.class2 {} } and the CSS that will be generated will look like this: .class1.class2 {} For the record, @grobitto was the first to … Read more
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
UPDATE Actually, the code in the original question works fine. You can just stick with the > child selector. Found the answer. .panel { … >.control { … } } Note the lack of space between “>” and “.”, otherwise it won’t work.
Install as npm install font-awesome –save-dev In your development less file, you can either import the whole font awesome less using @import “node_modules/font-awesome/less/font-awesome.less”, or look in that file and import just the components that you need. I think this is the minimum for basic icons: /* adjust path as needed */ @fa_path: “../node_modules/font-awesome/less”; @import “@{fa_path}/variables.less”; … Read more
Use Variable Interpolation: @url: “@{root}@{file}”; Full code: @root: “../img/”; @file: “test.css”; @url: “@{root}@{file}”; .px{ background-image: url(@url); }