Twitter Bootstrap LESS css答案

【问题标题】：Twitter Bootstrap LESS cssTwitter Bootstrap LESS css
【发布时间】：2013-08-31 11:35:45
【问题描述】：

我想知道为什么我不能使用 LESS 在 twitter 引导程序中设置变量。我在具有 bootstrap_and_overrides.css.less 文件的 Rails 上使用 ruby。它有以下语句

    // Your custom LESS stylesheets goes here
    //
    // Since bootstrap was imported above you have access to its mixins which
    // you may use and inherit here
    //
    // If you'd like to override bootstrap's own variables, you can do so here as well
    // See http://twitter.github.com/bootstrap/less.html for their names and    documentation
    //
   // Example:
   // @linkColor: #ff0000;

所以我的理解是我可以在这里设置我的变量。所以我设置了

  @black: #333;

然后尝试在我的 application.css 调用 @black 文件中使用它，但它不起作用？即不渲染#333。

我理解错了吗？我的所有变量和 css 样式是否都包含在引导程序和覆盖文件中？

任何建议表示赞赏

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

如果您在客户端使用它，请按照http://lesscss.org/#usage 的说明确保使用更新的 less。

或

将更新后的 less 编译成 CSS，然后复制更新后的 CSS。这是可以进行编译的工具列表。 http://bootstrap.lesscss.ru/less.html#compiling

有关如何组织引导程序修改的建议，请参阅 SO 问题 Twitter Bootstrap Customization Best Practices

顺便说一句，我不建议更改@black。改变它会改变很多很多事情，包括一些你可能没想到的事情。

【讨论】：

【解决方案2】：

如果我理解正确，您正在修改您的bootstrap_and_overrides.css.less 文件，但正在使用的是application.css 文件。
如果是这样，当然不反映您所做的更改是很自然的。您必须先将您的.less 文件编译为.css。将更改反映到您的 .css 文件中。

尝试一下，通过客户端使用 LESS 并像这样设置您的环境：

例如，在您的 index.html 文件中，放入

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

在文档头部。并在其下方添加

<script src="less.js" type="text/javascript"></script>

从here 下载less.js 文件。并将其放在您的根目录中，或者您当然可以自定义位置并在href 属性中创建必要的路径。

完成上述操作后，您就可以修改您的 application.less 文件（而不是 application.css）。您可以从 application.css 文件中复制现有的自定义样式。

application.less 是您应该放置变量的位置。

您可以将bootstrap_and_overrides.css.less 文件重命名为application.less 并确保它是标题标签中链接的那个。

有关 LESS CSS 的更多信息，请查看wiki。

【讨论】：