logo标签列表

Twitter Bootstrap和less文件

csstwitter-bootstrapless
6

我编写了一个着陆页面，只是为了尝试使用Less文件的Twitter Bootstrap。 我不确定我是否已经按照应有的方式组织了我的less文件。

在我的index.html的头部分：

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

这里是我的bootstrap.less文件内容。
// Core variables and mixins
@import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "less/mixins.less";

// CSS Reset
@import "less/reset.less";

// Grid system and page structure
@import "less/scaffolding.less";
@import "less/grid.less";
@import "less/layouts.less";

// Base CSS
@import "less/type.less";

// Utility classes
@import "less/utilities.less"; // Has to be last to override when necessary

在我的“less”文件夹中，我有以下文件：
  • utilities.less
  • utilities.css
  • variables.less
  • variables.css
  • grid.less
  • grid.css
  • type.less
  • layouts.less
  • mixins.less
  • scaffolding.less
  • reset.less
它们都是使我的登录页面正常运行所必需的，但我不确定这种文件组织方式是否是最佳解决方案。 我有点困惑，请问你能帮忙告诉我是否做得不错？是否有更好的文件组织方式？ 在这里您可以看到登录页面。
1个回答
8

您如何组织文件完全取决于您，但是在开发过程中，我通常这样做：

public/
    css/
        layout.css  (compiled from main.less)
        less/
            main.less  (imports bootstrap/bootstrap.less)
            bootstrap/
                bootstrap.less
                ...etc...

通常main.less还会导入像blog.less、forum.less等文件（根据网站内容而定）。这个方案让我可以在HTML中包含layout.css，并通过监视器或按需编译lesscss。

好的，所以您需要在less文件夹中包含main.less（或bootstrap.less），然后将所有less文件放在bootstrap文件夹中。 main.less会将layout.css编译到CSS文件夹中，但是它如何编译css文件夹中的css文件呢？您能提供一些指示吗？在我的情况下，bootstrap.less会自动将bootstrap.css编译到相同的路径中。 - Koala7
1
编译文件的存储位置取决于您使用的编译器。例如，SimpLESS 允许您设置编译后 CSS 的目标位置和文件名。 - orourkek
好的，现在我明白了。我之前没有试过使用SimpLESS，这就是我提出这个问题的原因。所以，把所有这些less文件放在less文件夹中是完全没有问题的，也不会出错。 - Koala7
我组织目录的主要原因是为了让 less/ 目录可以轻松地通过 htaccess 进行限制或在项目进入生产阶段时从 VC 中排除，这样你就只剩下 css/ 目录和最多一小部分文件（通常只有一个）。 - orourkek
我明白了，非常感谢。你想要保持网站结构的清晰，我也在寻找其他组织文件的方法，可以参考这里的内容：https://dev59.com/9mkv5IYBdhLWcg3wpCXJ 你觉得第一个答案怎么样？顺便说一下，我会给你正确的答案！ - Koala7
1
如果您计划定制Bootstrap并经常更新源代码，那么这是一个不错的方法。通常我会坚持使用相同版本的Bootstrap源代码，或者将新版本合并并手动解决冲突。我喜欢为每个项目修改Bootstrap核心，因此更新对我来说不是很重要。 - orourkek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接