css - 在 Rails 3 中导入 LESS 变量

Question

我的资产文件夹中有一个 global.less 文件，我在其中定义了许多站点范围的变量。

为了在其他较少的文件中使用这些变量，我目前将其放在每个文件的顶部：

@import 'global';

这可以很好地加载一切，但是现在我将全局副本加载到每个更少的文件中。我想知道是否有一种方法可以在项目中只编写一次导入，并且其他较少的文件能够访问它？

Answer 1

There are just two small things you need to do to make this happen.

1. Make application.css a .less file by renaming it to application.less or application.css.less.

2. Remove the require_tree . sprocket directive, which would import the files in the stylesheets directory on its own, removing your ability to define the order.

Once those things are done, it should work as you expect, simply:

// in global.less
@foo: #FFFFFF;

// in foo.less
.foo {
  background-color: @foo;
}

// and finally in application.less
@import 'global';
@import 'foo';