使用BEM方法声明Sass变量

Question

我正在尝试将BEM方法应用于我的sass变量。

// 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方法吗？

即使我要将颜色变量用于不同的块（正文，标题......），我应该在声明颜色变量时添加任何块吗？

Answer 1

如果有助于组织和标准化您的代码是一种很好的方法，相反，如果您认为没有必要，您可以使用其他约定。

例如，我在标记中使用BEM：

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

在变量命名中，我感觉不是那么冗长和严格，我只是简单地使用

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

但也可能取决于您正在进行的项目的复杂性。