Question

我有一个基于SASS的网站，有两个子网站。它们都使用完全相同的HTML和CSS布局，但它们改变了一些简单的品牌背景颜色。

在我的SCSS文件中，我有很多以下内容：

body.subsite-one {
  #sidebar-second #wrapper p {
    background-color: $primary-color-one;
  }
} 

body.subsite-two {
  #sidebar-second #wrapper p {
    background-color: $primary-color-two;
  }
} 

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      /* etc... */
    }

  }

}

不是在嵌套的其余部分之外声明自定义颜色，而是快速变得不整洁和杂乱，我想做类似的事情：

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      background-color: $primary-color-($subsite);
    }

  }

}

我的问题是：无论如何我可以设置一个变量，如上面的$ subsite，由父类/ id链改变？

（ NB ：我只能在正文上设置子网站类，但在任何其他代码上都无法使用。）

Answer 1

最简单的解决方案是使用parent selector：

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      .subsite-one & { background-color: $primary-color-1; }
      .subsite-two & { background-color: $primary-color-2; }
    }
  }
}

如果你有一个较长的子站点列表，你可以自动执行：

$subsites      : one  two     three   four   five;
$primary-colors: red  orange  yellow  green  blue;

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      @each $site in $subsites {
        $index: index($subsites,$site);
        .subsite-#{$site} & { background-color: nth($primary-colors,$index); }
      }
    }
  }
}

Answer 2

我不确定这是否有用，但请考虑尝试：

首先，使用通用规则的“_common.scss”：

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      background-color: $primary-color;
    }

  }

}

然后，为子站点1创建一个SCSS文件，让它导入该公共文件，但首先设置$primary-color变量：

$primary-color: red;
@import "common";

// rules specific to sub-site 1 go here

对子站点2执行相同的操作：

$primary-color: blue;
@import "common";

// rules specific to sub-site 2 go here

我在我的网站上做了类似的事情;在这里查看其源代码：
https://github.com/simevidas/ecmazing-site/tree/master/sass

Answer 3

在我看来，Eric的答案的以下变化应该（也）起作用：

$subsites: subsite-one subsite-two;

#sidebar-second {
  .case-study-aside-block  {
    .views-field-title .field-content span {
      @each $var in $subsites {
        background-color: $primary-color+$var;
      }
    }
  }
}

但是，由于我的Drupal驱动的SASS编译器中有possible bug，我现在无法轻易测试这个。

（或者，如果我不能连接变量，我可以按照他的建议逐步完成第二个列表。）

SASS - 父依赖变量重用？

3 个答案: