3

私は SCSS ファイルの次の構造を持っています: : suppliers.scssincludes _base.scss、_sortable-table.scssand : includes_product.scss _sortable-table.scss_product.scss_base.scss

_base.scss変調や列間サイズなど、レイアウトを定義する多くの変数が含まれています。また、他のクラスによって拡張された基本レイアウト クラスも含まれています。

問題は、パーシャルとすべてのスタイルがこのベース インポートを必要とするため、その内容が結果の css ファイルで数回複製されることです。これにより、css に大きなオーバーヘッドが発生します。

したがって、問題は、この重複をどのように防ぐかです。推測はありますか？

https://github.com/coletivoEITA/noosfero-ecosol/tree/distribution-plugin/plugins/suppliers/public/stylesheetsで実際のソースを参照してください。

4

1 に答える 1

3

インポート ディレクティブ、エクステンド、およびミックスインを詳しく調べてから、コードをリファクタリングする必要があります。「スーパーファイル」(app.scss) から始めたいと思うかもしれません。このファイルは基本的に、作成したすべてのファイルを必要な順序でインポートするだけです。

これは、app.scss の典型的なコンテンツである可能性があります。

@import "settings";

@import "mixins";
@import "extends";
@import "browser-reset";

@import "styles";
@import "more-styles"
@import "even-more-styles"
@import "..."
  1. 最初に行うことは、すべての設定/変数をインポートすることです。
  2. その後、すでにいくつかの変数に依存している可能性のあるミックスインをインポートしています。
  3. これで、変数とミックスインを使用できるようになりました。
  4. ブラウザリセットファイル
  5. これまでに作成したすべての設定、ミックスイン、および拡張を利用できる My App-Styles。

app.scss 以外の他のすべてのファイルの先頭にアンダースコア (_settings.scss など) を追加するようにしてください。そうしないと、個別の css ファイルとして作成され、変数、ミックスイン、または拡張を使用したときにもちろんエラーがスローされます。

このようにコードを整理し、必要に応じて mixin と extends を使い始めると、肥大化したコードについて心配する必要がなくなります。

于 2013-09-08T10:09:57.247 に答える