Sass中有多个两类选择器

CSS

Stafan神乐

2020-03-19

一个声明块具有多个两类选择器,可以简化以下操作(即不必重复body标签):

body.shop, body.contact, body.about, body.faq {background-color:#fff;}

第2233篇《Sass中有多个两类选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
前端逆天 2020.03.19
body {
    &.shop, &.contact {
        // Styles here...
    }
}
老丝小卤蛋梅 2020.03.19

尝试这个:

body{
   &.shop, &.contact, &.about, &.faq {
        background-color:#fff;
    }
}
西里阿飞 2020.03.19

在这种情况下,我们可以使用@each指令:

$pages: shop, contact, about, faq;

body {
  @each $page in $pages {
    &.#{$page} {
      background-color:#FFF;
    }
  }
}

sassmeister.com

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android