Question

假设我有这样的事情：

session = new RDOSession(); 
session.LogonPstStore(C:\\temp\\outputfile.pst);                    
var mail = RdoFolder.Items.Add("IPM.Mail");
mail.Sent = true;
mail.Import(C:\\temp\\randomfile.eml, 1024);
mail.Save();

现在我要有一个蓝色物体。但是，让我们说我想制作相同的物体，但是红色，可能是直观的写作

.object {
  $primary-color: blue;
  h1 {
    font-size: 40px;
    color: $primary-color; 
  }
  p {
    font-size: 20px;
    color: $primary-color; 
  }
}

并期望所有$ primary-color更改为红色，但这在SCSS中无效。我要写的是：

.object red {
  $primary-color: red;
}

如果我这样做，我仍然可以将hp和20px中的40px字体大小保持为p，并将所有颜色更改为红色。但是，一旦我的代码变大，这将变得越来越难以维护。

SCSS是否提供任何工具来使此任务更加模块化和可维护？

Answer 1

确定SCSS提供了这样的功能，但您也可以使用CSS变量来完成CSS：

＆＃13;

.object h1 {
  font-size: 40px;
  color: var(--p, blue);
}

.object p {
  font-size: 20px;
  color: var(--p, blue);
}
.red {
  --p:red;
}
.other-color {
  --p:rgb(15,185,120);
}

＆＃13;

<div class="object">
<h1>Blue title</h1>
<p>blue text</p>
</div>
<div class="object red">
<h1>red title</h1>
<p>red text</p>
</div>
<div class="object other-color">
<h1>red title</h1>
<p>red text</p>
</div>

＆＃13;

Answer 2

//you can use sass maps - if you want do add new color version of component just add the color to variables to the map.


  //define colors

$product-color-red: red;
$product-color-blue: blue;

//define color map
$colors-list: (
  primary : $product-color-red,
  secondary : $product-color-blue
);

// generate componenent with multiple colors
@each $key in map-keys($colors-list) {
  .mycomponent {
    &.color-#{$key} {
      p {
        color: map-get($colors-list, $key);
      }
    }
  }
}

//effect below, you could change color-xxx class to component variant name
.mycomponent.color-primary p {
  color: red;
}

.mycomponent.color-secondary p {
  color: blue;
}

根据类名动态更改变量

2 个答案: