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

Question

我正在使用骨架框架构建一个网站，使用从 LESS 编译的分支。

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

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

score 1 · Accepted Answer

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

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

项目.less：

@import "less/skeleton";

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

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

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

但是字体大小没有变量，某些元素需要自定义>边距和填充。

对于立场，您应该覆盖每个选择器的这些属性：

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

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

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

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

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

lessc project.less --skeleton

1 回答 1