3

これが私のセットアップです：

ファイルの関係

home.php <---styles---- _layout.scss
   |
imports
   |
   v
animation.html <---styles---- _animation.scss

home.php - ホームページの「レイアウト」HTML のアウトラインに使用されるファイル:

<div id="animation">
    <div class="site-container">

        <div class="animation-container">
            <?php include 'animation.html'; ?>
        </div>

    </div>
</div>

_layout.scss - home.php のインポートされていないコンテンツのスタイルを設定するために使用されるファイル:

#animation {
    //styles <div id="animation">
}

    .site-container {margin: 0 auto; max-width: 980px;}

        .animation-container {
            //styles <div class="animation-container">
        }

animation.html - 上記でインポートした「アニメーション」という「モジュール」の html が含まれています。

<div class="animation-wrap">
    <div class="example-selector"></div>
    //more html for animation module
</div>

_animation.scss - animation.html で html のスタイルを設定します

質問: _animation.scss でセレクターをカプセル化するにはどうすればよいですか?

可能性

1.) _animation.scss のすべてのセレクターを次のようにネストできます。

.animation-wrap {

    .example-selector {

    }
    //all other selectors are nested here using SASS, thus they will not affect
    //elements outside of the animation-wrap
}

2.) 接頭辞「animation-」を追加することで、_animation.scss 内のほぼすべてのセレクターに名前空間を付けることができました (および対応する html 内)。

.animation-wrap {}

.animation-example-selector {}

3.) 子セレクターを使用してカスケードを減らすことができますが、それが最善であるとは思えず、IE のサポートが貧弱です

4.) サブクラス化? しかし、モジュールをカプセル化して他のモジュール/レイアウトコードに漏れないようにするのではなく、モジュールを別の場所に移動することに関連していると思います

長々と質問してすみません、言葉にするのがぎこちなかったです。ベストプラクティスに関する追加のアドバイスや知識は大歓迎です

4

1 に答える 1

1

下手な質問でごめんなさい。これは、同様の問題に対するより適切な表現の質問です。

SASS 3.3 の新しい「&」の柔軟性を使用して、_animation.scssのセレクターに名前を付けることにしました。

.module-animation { 
        &-animation-wrap {

        }
}

これにより、html がクリーンに保たれ、モジュールがカプセル化され、css が長いプレフィックスで乱雑になりません。

于 2014-03-13T19:33:58.387 に答える