Geek asks and answers

Less CSS Import Issues

Im working here with Less CSS. All things went fine, but now I get a small error. I have two smaller files. The first is called "colors.less", where I declared the colors vars, and the second is the css structure.

Something like that:

color.less

@black: #000;

styles.less

@import "color";

body {
    background: @black;
}

In my tag, I write it:

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>

And of course import less js.

What happens when I change black to white (#fff), it doesn't change to white. The frames are black. When I change the logic, import the styles inside the color, it changes, but my styles do not change.

What am I doing wrong?

Thanks guys!

+3
source share
5 answers

Using

@import "color.less";

, , . , color.less , , , .

PS: , color.less colorS.less.

+5

LESS css, :

@import "color.less";

http://www.w3.org/TR/css3-syntax/

+2

color stylesheet, sheet?

@import.

, rule. , .

0

, , yout <head> -tag :

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>
<link rel="stylesheet/less" type="text/css" href="less/color.less"/>

style.less, color.less, <head> -tag.

Btw: I would not name the color @black, it can lead to confusion when changing the color later, try using more descriptive names instead, for example @mainBackgoundColor, to get code that also reads well.

0
source

Whichever file you import should have a .css extension. Only the containing or extracting file can have the extension .less.

In your example, the color file should have the extension .css instead of .less. That should fix you.

** Update Worked in Chrome, not in Firefox. ?? Weird

-6
source

More articles:


All Articles