在Scss中使用提取體類

Question

我正在學習Sass，但有點卡住試圖解決問題。我想在不同的頁面上有獨特的背景圖片和標題圖片。我怎樣才能從標記中提取身體類名並在scss中解釋它？

基本上我需要一些方法來防止不得不這樣做（這是完全的SCSS吧？！點）

body.page1 { 
    background: url(../img/bkg-page1.png) left top repeat-x; 

    header { 
    background: url(../img/header-page1.png) center top no-repeat; 
    height: 320px; 
    } 

} 

body.page2 { 
    background: url(../img/bkg-page2.png) left top repeat-x; 

    header { 
    background: url(../img/header-page2.png) center top no-repeat; 
    height: 320px; 
    } 

} 

我體會到使用的變量是正確的方向，但不知道如何中繼標記類到scss。

任何指針將不勝感激。

Answer 1

什麼你要找的是一個@each循環：

@each $class in (page1, page2, page3) { 
    body.#{$class} { 
     background: url(../img/bkg-#{$class}.png) left top repeat-x; 

     header { 
      background: url(../img/header-#{$class}.png) center top no-repeat; 
      height: 320px; 
     } 
    } 
} 

這假定類名對應於圖像的名稱，如您的樣品中指出。

body.page1 { 
    background: url(../img/bkg-page1.png) left top repeat-x; 
} 

body.page1 header { 
    background: url(../img/header-page1.png) center top no-repeat; 
    height: 320px; 
} 

body.page2 { 
    background: url(../img/bkg-page2.png) left top repeat-x; 
} 

body.page2 header { 
    background: url(../img/header-page2.png) center top no-repeat; 
    height: 320px; 
} 

body.page3 { 
    background: url(../img/bkg-page3.png) left top repeat-x; 
} 

body.page3 header { 
    background: url(../img/header-page3.png) center top no-repeat; 
    height: 320px; 
} 

你可以使用一個@for循環，而不是（這消除了類名稱列表的需要），如果你的類名總是會在他們的名字的結尾有一個數字。