样板 LESS 框架应该如何定制？

Question

构建网站

在不丢失骨架提供的底层脚手架的情况下自定义样式的正确方法是什么？我知道我可以更改 @font-color 等变量，但是字体大小没有变量，某些元素需要自定义边距和填充。

我应该编辑 LESS 文件还是创建一个单独的 css 文件？

Answer 1

您提到的分支附带一个文件 (less/skeleton.less)，其中包含所有必需的 Less 代码。

您可以创建一个导入 less/skeleton.less 的新文件（例如 project.less）。

project.less:

@import "less/skeleton";

现在您可以在导入指令后覆盖 less/skeleton.less 中声明的所有变量。

@import "less/skeleton";
@font-color: blue;

由于 Less 使用延迟加载并且变量的最后声明获胜规则，您可以通过在后面放置定义来覆盖变量，另请参阅：http://lesscss.org/features/#variables-feature-lazy-loading.

but there are no variables for font-size and certain elements need custom >margins and padding.

您应该覆盖每个选择器的这些属性，例如：

button, .button {
height: 48px; //overide button's height
}

创建一个新的 class

.smallbutton {
&:extend(.button all);
height: 16px;
}

Less 代码还包含一些媒体查询。您应该在代码中使用这些媒体查询：

@media (min-width: @bp-larger-than-mobile) { 
.smallbutton {
&:extend(.button all);
height: 16px;
}
}

除了导入 Less 代码之外，您还可以使用 Less Skeleton plugin。安装此插件 (npm install less-plugin-skeleton) 后，您可以在不使用 @import 指令的情况下按上述方式编译代码。

lessc project.less --skeleton

How should a boilerplate LESS framework be customised?