1

私には 3 つのプロジェクトがあります。Proj A には、多くの異なるプロジェクトで再利用され、編集できないファイルを含む基本的なセットアップが含まれています。そして、プロジェクト A のファイルをベースとして使用するプロジェクト B と C。各プロジェクトには独自の Gruntfile があります。

Proj B および C でいくつかの JS および SCSS ファイルをカスタマイズしたい (例: 色/変数の変更)。ただし、Proj A は時々更新される可能性があるため、最新の変更を B および C にプルするときに上書きされるため、これらの基本ファイルを編集することはできません。 Proj A のファイル。

1)

それを行う方法は、編集したいファイルをコピーし、そのファイル名に単に「オーバーライド」を追加することです。

ui/styles/sass/ _override_colors.scss *(ui/styles/sass/_colors.scss をオーバーライドする必要があります)* ui/scripts/ _override_base.js (ui/scripts/base.js をオーバーライドする必要があります)

問題は、Gruntfile でこのルールをどのように指定すればよいかということです。ただし、コピーするファイルが大きい場合、それはオプションではない可能性があります。これは、2 つの非常に同一の大きなファイルを意味するためです。

2)

もう 1 つの方法は、_overrides.scss という新しいファイルを追加し、それを @import ファイルの最後に追加することです。ただし、多くのことを変更する場合は、面倒で大きすぎる可能性があり、コードの重複を意味するため、それは悪い考えです (変数のみをオーバーライドし、クラスをオーバーライドしない場合を除きます)。

どのアプローチを採用しますか？この問題を解決するための他のより良い方法はありますか?

ありがとう！

web.scss:
@import 'colors';
@import 'grid';
@import 'base';
// @import 'overrides'; ?


grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        dev: {
            options: {
                style: 'expanded',
                sourcemap: true,
                quiet: true

            },
            files: {
                'styles/css/web.css':       'styles/sass/web.scss'
            }
        }
    },

    uglify: {
        site: {
            files: {
                'scripts/min/site.js': [
                    'scripts/dev/forms.js'
                    'scripts/dev/base.js'
                ]
            }
        }
    }, ....
4

1 に答える 1

-1

これGruntfile.jsはSASS.

オーバーライドする方法を好む場合は、オーバーライド ファイルに_appB.scssandという名前_appC.scssを付けて、コンパイルに追加します。これらのファイルは、オーバーライドのみを行う限り、肥大化することはありません。

ただし、オーバーライドしない方法を選択して、アプリごとに専用のセレクターを作成することもできます。これには慣れるまでに時間がかかりますが、長期的にはより保守しやすいことが証明されます。このように、すべてのセレクターは独自の生活を送っています。

オーバーライドの例:

_appA.scss (共通スタイル)

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content { height: 90px; }

_appC.scss

.content { height: 70px; max-width: 768px; }

マークアップ

<div class="content"></div>

ブロック/要素/修飾子の「オーバーライド」の例:

_appA.scss (共通スタイル)

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content--b { height: 90px; }

_appC.scss

.content--c { height: 70px; max-width: 768px; }

マークアップ

<div class="content content--b"></div>
<div class="content content--c"></div>

上記の最後のマークアップの例は、OOCSSの一般的な解釈であるBEM 構文の表現です。

私と職場の同僚は複雑な製品を管理しており、このワークフローは非常に扱いやすいと感じています。

于 2014-04-08T21:02:12.293 に答える