2011-05-24 83 views
3

我在这里处理较少的CSS。 Everythings进展良好,但即时得到一个小错误。 我有两个较少的文件。第一个被称为“colors.less”,其中我声明了颜色变量,第二个是css结构。减少CSS导入问题

它是这样的:

color.less

@black: #000; 

styles.less

@import "color"; 

body { 
    background: @black; 
} 

在我头上的标签,我写它:

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

当然,导入更少的js。

发生什么事情是当我将黑色更改为白色(#fff)时,它不会更改为白色。剧照黑。当我反转逻辑,导入颜色内的样式,它会改变,但我的样式不会改变。

什么即时做错了?

谢谢你们!

回答

5

使用

@import "color.less"; 

这probely解决你的问题。如果这不解决问题,请尝试在color.less中使用红色,如果您的浏览器默认颜色为黑色,则不会看到该样式是否已加载。 PS:检查你的文件名,如color.less或colorS.less。

+2

最后应该有一个分号,但我只是挑剔。 – Ben 2012-08-27 08:44:47

+1

你也可以 '@import“color.css”;' – 2012-11-28 05:07:31

+0

这个答案不用分号就没有用。 – 2013-04-14 05:51:03

0

您能否在主stylesheet内有color而不参考第二个sheet?您可以跳过@import

此外,我会选择rule的另一个名称。如果你决定改变颜色,你的规则名称就没有意义了。

+0

林少用,因为我需要我的风格是动态的。用户将在admin上设置颜色,这些颜色将保存在color.less文件中。关于规则名称,我试过了,我已经提出了另一个名字,并没有工作。 – 2011-05-24 17:34:20

0

我不知道这可能是造成这一点,但尝试YOUT引用这两个文件<head> - 标签是这样的:

<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:我不会调用颜色@black,这可能会导致以后更改颜色时出现混淆,请尝试使用更多描述性名称,例如@mainBackgoundColor来代替,以获取读取良好的代码。

+0

@Lucas: 另一个想法:尝试使用'@import'./color.less';'(或''./color''如果你喜欢它的话),我刚刚使用它导入了一分钟前,它的工作完美无缺 此外,当你更新一个导入的文件时,也要更新导入的文件(只是在某处或某处添加一个空格),我认为不太可能是在进行一些缓存或某事。 – Ahti 2011-05-24 23:23:59

-6

无论您要导入的文件都必须具有.css扩展名。只有包含或检索文件可以具有.less扩展名。

在你的例子中,颜色文件应该有.css扩展名而不是.less。这应该解决你的问题。

**更新 在Chrome中工作,不在Firefox中 ??奇怪的。