SASS + SMACSS 正确封装模块答案

【问题标题】：SASS + SMACSS properly encapsulating modulesSASS + SMACSS 正确封装模块
【发布时间】：2014-04-17 07:22:04
【问题描述】：

这是我的设置：

文件关系

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 - 包含上面导入的名为“animation”的“模块”的 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.scss 中通过添加前缀“animation-”（以及相应的 html）来命名几乎所有选择器

.animation-wrap {}

.animation-example-selector {}

3.) 可以使用子选择器来减少级联，但我怀疑这是最好的，它对 IE 的支持很差

4.) 子类化？但是，我认为这与将模块移动到其他地方更相关，而不是封装它以确保它不会泄漏到其他模块/布局代码中

抱歉这个冗长的问题，说起来很尴尬。非常感谢任何其他建议或最佳实践知识

【问题讨论】：

除非您的问题是“我如何获得此输出”，否则您的问题是题外话。 meta.stackexchange.com/questions/121289/… 和 meta.stackexchange.com/questions/90637/…
你在哪里使用 smacss？我在您的代码中没有看到任何命名约定，甚至接近 smacss。
@cimmanon 对不起这个不好的问题
@Lowkase 也许我应该在 _layout.scss 选择器前加上 '.l-'。感谢您指出了这一点。我正在使用 SMACSS 来分隔布局 (_layout.scss) 和模块的代码（给出的示例模块是 _animation.scss）。 SMACSS 大体上与命名约定无关。虽然它确实包含一些，但 SMACSS 的重点是模块化代码以使其可扩展。命名约定更多地属于 BEM 等领域。

标签： html css sass smacss

【解决方案1】：

抱歉，这个问题很糟糕。 This 是一个类似问题的措辞更好的问题。

我决定使用 SASS 3.3 全新的 '&' 灵活性来命名 _animation.scss 中的选择器，就像这样

.module-animation { 
        &-animation-wrap {

        }
}

这样可以保持 html 干净，封装模块，并且不会用长前缀弄乱 css。

【讨论】：