应该如何定制无样板的框架

Question

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

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

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

Answer 1

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

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

无项目：

@import "less/skeleton";

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

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

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

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

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

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