使用Sass通过BEM命名控制范围

控制范围是您在使用CSS和Sass时可能不会考虑的事情。我们已经有了相当长的一段时间访问&符号&)的时间,这给了我们一定的范围 – 但是当它嵌套得相当深时,它很容易失去它的用处。该&可以给我们发下来厄运的多风道的时候,我们完全失去跟踪的这意味着什么,可以负责一些很沉重的膨胀。

同时,在JavaScript中,我们可以this通过将它作为一个变量来控制它的范围,这意味着它将意味着我们需要它。这通常在方法或对象的开始处:

现在我们已经self在上述情况下,foo()无论我们在哪里可能发现自己在函数中,我们总是有一个参考。当我们结束于setTimeout场景,关闭或事件处理程序时,这非常有用。

一个事件的简单例子将有助于说明我的观点。

使用这个标记:

我们可以添加这个JavaScript:

在该代码示例中,如果在component__child-element打开控制台的情况下单击某个控件,this则会将其自身报告为事件目标,这恰好是我们单击的元素。如果你认为它会引用,这是不理想的foo()

现在,如果我们使用相同的示例self代替this事件处理程序,控制台将报告foo()相反的实例:

#那么,如何这样?

我很高兴你在那里坚持着我,因为这个JavaScript例子是我们将要看到的与Sass有关的入门书。

首先,让我们从相同的标记和一些核心风格开始。

这给了我们一个很好的紫色正方形,里面有一个白色圆圈。没有什么突破性的,但对这个例子有用。

您可能会注意到我们正在使用BEM语法,因此我们继续创建一个修改器。

我们想要一个倒置的版本,.component它有一个白色的背景和一个紫色的圆圈。因此,让我们继续前进,通过将它包含在同一个嵌套规则集中,我们可能会认为它会立即执行:

 

等等,为什么这不起作用?问题是,&有一个范围.component--reversed,所以&__child-element编译成.component--reversed__child-element,这并不在标记存在。

$self救援!

就像我们之前看到的JavaScript一样,我们将把我们的初始范围转换为一个名为的变量$self。你可以这样做:

这意味着无论我们$self在组件中使用什么,它都会编译为.component

所以让我们重构一下反向修饰符,以便它实际工作:

现在.component--reversed .component__child-element该元素的已编译CSS现在存在并成功将内圈变为紫色:

#进一步探索

我喜欢在组件中做的一件事情是在元素本身内引用父元素的修饰符,而不是像我们之前做的那样在修饰符中引用元素。这是为了保持我的风格每个元素分组。出于同样的原因,我也会将媒体查询放入元素中。
我最终得到的代码如下所示:

通过使用$self根上下文,我们可以灵活地轻松处理我们的修饰符。因为$self.component&.component__element,添加--reversed部分生成我们.component--reversed .component__element正是我们想要的。

#一个更高级的例子

现在让我们真的推开小船,写一些有趣的东西。我们要布置三个独立的网格。使用$self,我将在网格项目中使用兄弟选择器来更改网格项目的颜色。

让我们看看影响颜色的Sass:

该选择器编译的是什么.grid + .grid .grid__item。我们的组合$self&使我们能够在元素的背景下产生这一点&。这对维护复杂代码库中的某种顺序非常有用。

#总结

我们从JavaScript中获得灵感,通过使用这个小片段来控制我们的BEM组件中的范围:$self: &。通过范围控制,当我们深入修饰符或子元素时,我们可以灵活地编写干净,有组织的BEM驱动的CSS。

Back to Top