Question

I’m trying to integrate LessCSS (version 1.0.41) with Blueprint but it seems that I can’t import css files in my less stylesheet. So I tried a simpler import:


.red {
color: red;
}


and put it in test.css. Then, in less_test.css:


@import "test.css":

.test {
.red;
background-color: pink;
}


But LessCSS complains that .red is not defined. What am I missing?
If I rename test.css in test.less (and import it as “test”) everything runs fine. But would it be safe to change blueprint files extension and use it as screen.less, print.less and ie.less?

Answer 1

As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax.[1]

Which means that any valid CSS file is also valid LESS file, so you can safely rename your .css files to .less and you shouldn’t have any problems.

[1] http://lesscss.org/#docs