SASS-父因变量重复使用？

我有一个基于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：我只能在体上设置子站点类，它在任何其他标签上都不可用。）< /P> < P>我不确定这是否可行，但请考虑尝试：

首先，创建一个带有通用规则的“_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

我正在我的网站上做类似的事情；请在此处查看其源代码：

---

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

如果子站点列表较长，则可以自动执行以下操作：

$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); }
      }
    }
  }
} 

---

我突然想到，Eric回答的以下变化应该（也）起作用：

然而，由于我的Drupal支持的SASS编译器中存在一个错误，我目前无法轻松测试这个问题

---

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

但是您将在哪里设置

$subsite

变量，即如何确保每个子站点上的变量值不同？您似乎只有一个SCSS文件。@Šime Vidas我不介意在哪里设置它-我可以有多个SCSS文件（我已经在使用一个_mixin.css文件）-但我希望将代码保持在最低限度。D.R.Y！这是一个很好的解决方案，但从我所知道的来看，它依赖于段落中可用的site类。它不是，它只是在主体上（我会在OP中说得更清楚）。不，这将与主体上的site类一起工作。这就是

&

的作用。它可以让你在堆栈的前面添加选择器。事实上，即使没有@each，这也会让我的代码更加简洁。谢谢，我会把你的答案记为接受答案。

$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); }
      }
    }
  }
} 

$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;
      }
    }
  }
}