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 回答