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

但也取決於項目的複雜性您正在努力。