6

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

在我的 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”中，我有以下文件

  • 实用程序.less
  • 实用程序.css
  • 变量.less
  • 变量.css
  • 无网格
  • 网格.css
  • 无类型
  • 布局.less
  • mixins.less
  • 脚手架.less
  • 重置.less

它们实际上都是使我的登录页面正常工作所必需的，但我不确定这种文件组织是否是最佳解决方案。我对此有点困惑，你能帮我看看我做得好吗？有没有更好的方法来组织文件？

在这里你可以看到登陆页面

4

1 回答 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。

于 2013-01-10T17:22:53.687 回答