使用 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;

但也取决于您正在进行的项目的复杂程度。

使用 BEM 方法声明 Sass 个变量

Declaring Sass variables using BEM methodology

variables

sass

bem