0

LESS からコンパイルするフォークを使用して、スケルトンフレームワークを使用して Web サイトを構築しています。

スケルトンによって提供される基礎となる足場を失うことなくスタイルをカスタマイズするための正しいアプローチは何ですか? などの変数を変更できることは理解して@font-colorいますが、font-size の変数はなく、特定の要素にはカスタムのマージンとパディングが必要です。

LESS ファイルを編集するか、別の css ファイルを作成する必要がありますか?

4

1 に答える 1

1

less/skeleton.lessあなたが言及したフォークには、必要なすべての Less コードを含む単一のファイル ( ) が付属しています。

project.lessをインポート する新しいファイル (たとえば ) を作成できますless/skeleton.less。

project.less:

@import "less/skeleton";

less/skeleton.lessimport ディレクティブの後に宣言されたすべての変数をオーバーライドできるようになりました。

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

Less では遅延読み込みが使用され、変数の最後の宣言が優先されるため、後で定義を配置することで変数をオーバーライドできます。 http://lesscss.org/features/#variables-feature-lazy-loadingも参照してください。

ただし、font-size の変数はなく、特定の要素にはカスタム >マージンとパディングが必要です。

たとえば、セレクターごとにこれらのプロパティをオーバーライドする必要があります。

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
于 2015-02-23T00:00:39.183 に答える