使用BEM方法声明Sass变量

Question

我试图对我的sass变量实施BEM方法。

// Variables 
    // Colors 
    $color--blue--light: #3696D1; 
    $color--grey: #2D4452; 
    ... 
    // Fonts 
    $body__font--sans-serif--roboto: 'Roboto', sans-serif; 
    ... 

/* Global */ 

body { 
    font-family: $body__font--sans-serif--roboto; 
    background-color: $color--blue--light; 
    color: $color--grey; 
}... 

这是一个很好的BEM方法吗？

即使我将为不同的块（body，header ...）使用颜色变量，我应该在声明颜色变量时添加任何块吗？

Answer 1

如果帮助组织和标准化你的代码是一个好方法，相反，如果你觉得没有必要你可以使用另一个约定。

例如我用BEM在标记：

<div class="myBtnClass myBtnClass--blue"> 
    <div class="myBtnClass__inner"> 
     etc etc etc 

在变量命名，我不觉得有帮助的这么详细，严格，我用简单的

$red: #cc0000; 
$roboto: 'Roboto', sans-serif; 

但也取决于项目的复杂性您正在努力。