0

私は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に中継する方法がわかりません。

任意のポインタをいただければ幸いです。

4

1 に答える 1

3

あなたが探しているのは@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ループを使用できます（これにより、クラス名のリストが不要になります）。

于 2012-12-07T15:44:38.167 に答える