我编写了一个Landing页面,只是为了尝试使用Less文件的Twitter Bootstrap。 我不确定我是否按原样组织了较少的文件。
在我的index.html的head部分:
<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”中,我有以下文件
它们实际上是使我的目标网页工作所必需的,但我不确定这个文件组织是否是最佳解决方案。 我对此感到有点困惑,你能帮助我,告诉我,如果我做得好吗?有没有更好的方法来组织文件?
Here您会看到目标网页
答案 0 :(得分: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。