CODEWITHSUNDEEP
cssless
Lucas Veiga
Lucas Veiga

Reputation: 1793

Less CSS Import Problem

Im dealing here with Less CSS. Everythings was going fine, but im getting a little bug now. I have two less files. The first is called "colors.less" where i declared the colors vars, and the second is the css structure.

Its something like this:

color.less

@black: #000;

styles.less

@import "color";

body {
    background: @black;
}

In my head tag, im writing it:

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

And of course, importing the less js.

Whats happening is when i change the black color to White (#fff), it dont change to white. Stills black. When i reverse the logic, import the styles inside of color, it changes, but my styles dont change.

What im doing wrong?

Thanks guys!

Upvotes: 3

Views: 9015

Answers (5)

Necrower
Necrower

Reputation: 105

Use

@import "color.less";

This probely solve you problem. If this don´t fix the issue try use a red color in you color.less cause if the you browser default color is black you will not see if the style ins´t loaded.

PS: Check your file names like color.less or colorS.less.

Upvotes: 5

Ben
Ben

Reputation: 4371

LESS uses css syntax so you need the file extension:

@import "color.less";

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

Upvotes: 2

Jeremiah
Jeremiah

Reputation: 1

Whatever file you are importing has to have a .css extension. Only the containing, or retrieving, file can have the .less extension.

In your example, the color file should have a .css extension instead of .less. This should fix you right up.

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

Upvotes: -6

Ahti
Ahti

Reputation: 1430

I don't know what could be causing this, but try referencing both files in yout <head>-tag like this:

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

And then also change your style.less to not import color.less since you're doing that in your <head>-tag already.

Btw: I wouldn't call the color @black, this may lead to confusion when changing the color later on, try to use more descriptive names like @mainBackgoundColor instead, to get code that reads well too.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

Could you have the color within the main stylesheet and not reference the second sheet?

Then you could skip the @import.

Also, I would pick another name for the style rule. If you decide to change the color, your rule name will not make sense.

Upvotes: 0

Related Questions