0

我有一个基于 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 链更改？

（注意：我只能在主体上设置子站点类，它在任何其他标签上都不可用。）

4

3 回答 3

6

最简单的解决方案是只使用父选择器：

#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); }
      }
    }
  }
}
于 2012-11-10T20:27:59.257 回答
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

于 2012-11-09T16:59:37.583 回答
-1

在我看来，埃里克答案的以下变体应该（也）起作用：

$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 编译器中可能存在错误，我目前无法轻松地对此进行测试。

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

于 2012-11-14T11:22:00.060 回答