Declaring Sass variables using BEM methodology

Question

I am trying to implement the BEM methodology to my sass variables.

// 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;
}...

Is this one a good approach to the BEM methodology?

Even I am going to use the color variable for different blocks (body, header...), should I add any block when declaring the color variable?

Answer 1

If helps to organize and standardize your code is a good approach, instead if You feel it's unnecessary You could use another convention.

For example I use BEM in markup:

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

In variables naming I don't feel helpful being so verbose and strict and I use simply

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

But can depend also on the complexity of project You are working on.