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循环（这样就不需要列出类名）。

提取在Scss中使用的body类

1 个答案: