SCSS和BEM命名结构和最佳实践。

Question

目前与scss我了解变量，包括和嵌套。

我想创建一个使用BEM命名结构的新scss设置。所以例如

.btn { 
    padding: 20px; 
    .btn__value { 
    color: $valColour; 
    } 
} 

.btn--gold { 
    color: $gold; 
} 

所以，我有类.btn__value嵌套因为这将是该按钮块内部的跨度和只用有和它取决于按钮父元素所以BEM状态使用__前缀的元素类名称。

不过，对于按钮的颜色造型器，以便它们不嵌套（我不知道关于这个问题，我大概可以窝这一个像下图）。

.btn { 
    padding: 20px; 
    .btn__value { 
    color: $valColour; 
    } 
    &.btn--gold { 
    color: $gold; 
    } 
} 

我试图找出最佳实践为了这。如果任何人有任何输入Id喜欢听到它。我不是很喜欢嵌套。但是因为它的名字是btn--我不会在别的地方使用它。

Answer 1

我已经创建了一个相当简单的live example帮助您了解BEM。基本上你想要在sass中使用＆符号来连接类名称。

我的例子有不同的类名，以帮助更清晰，您可以看到CSS输出以及如何在上面的链接中使用HTML中的类的示例。

// ---- 
// Sass (v3.4.21) 
// Compass (v1.0.3) 
// ---- 

$defaultColor: black; 
$gold: gold; 

// Block 
.btn { 
    color: $defaultColor; 
    padding: 20px; 

    // Element 
    &__span{ 
    font-weight: 600; 
    } 

    // Modifier 
    &--no-padding{ 
    padding: 0; 
    } 
    // Modifier 
    &--gold{ 
    color: $gold; 
    } 
} 

希望这可以帮助您清除BEM！