如何定制样板LESS框架？

Question

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

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

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

Answer 1

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

您可以创建一个导入project.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。

  

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

对于stance：

，您应该为每个选择器覆盖这些属性

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