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

Question

我正在使用 skeleton 构建网站框架，使用 a fork that compiles from LESS .

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

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

Answer 1

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

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

无元素:

@import "less/skeleton";

现在您可以在 import 指令之后覆盖 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
}

或者使用 extend feature 创建一个新类

.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