Question

我对此做了一些研究，但无法找到我需要的东西，因为我可能不理解答案。

我需要能够为两个特定页面定义基色。

第一页使用@ brand-color 第二页也使用@ brand-color。

第二页有不同的身体类别。我需要说明.page-2上的@ brand-color与第1页上的不同。

我不太确定如何做到这一点，或者它是否可能。

所有的样式都已经在第1页的表格中，我真的只需要改变他的品牌颜色就可以在第2页更新所有内容，我更愿意这样做然后通过所有css并为第2页添加额外的声明和重复。

这可能吗？

Answer 1

我认为这不可能，但你可以这样做：

@brand-primary:  #ff0000;

body{
  &.page-2{
    @brand-primary:  #00ff00;

    .yourclass{
      color: @brand-primary;
    }
  }

  .yourclass{
    color: @brand-primary;
  }
}

所以.yourclass在body.page-2上有不同的颜色，但这只能在范围内。

但在这种情况下，定义第二个变量可能更有意义。

Answer 2

您应该将 mixin 与 changing selector order technique 一起使用，而不是变量。

my $last = pop @array

will be compiled to css：

@brand-color-1: #ff0000;
@brand-color-2: #00ff00;

.brand-color() {
  color: @brand-color-1;

  .page-2 & {
    color: @brand-color-2;
  }
}

.my-brand-header {
  .brand-color();
}

基于身体类别的变量较小

2 个答案: