Question

在我们的网站上，我们有一个包含多个网站的部分，它们都使用不同的颜色代码。我想保持简单并更改数据属性中特定值的颜色，如下所示：

[data-page-id="site1"] {
@color: #F00;
}
[data-page-id="site2"] {
@color: #D40;
}

.page-title {
color: @color;
}

.page-content {
background: @color;
}

我的方法给了我一个错误，但有一种熟悉的方法可以做到这一点吗？

Answer 1

当Less编译器正在编译代码时，它不会知道标记中存在的数据属性（因为Less是与HTML分开编译的）。因此，您无法根据属性的值来确定颜色变量的值。

您可以尝试在客户端编译Less代码，但对于生产站点，这并不是真正推荐的（即使是官方的Less网站）。它最好只用于某些测试。

假设data-page-id和.page-title的父元素中存在.page-content属性，您可以使用下面的内容静态生成所需的规则集。

@site-colors: #F00, #D40;
[data-page-id="site1"] {
    .page-title {
        color: extract(@site-colors, 1);
    }
    .page-content {
        background: extract(@site-colors, 1);
    }    
}
[data-page-id="site2"] {
    .page-title {
        color: extract(@site-colors, 2);
    }
    .page-content {
        background: extract(@site-colors, 2);
    }
}

＆＃13;

[data-page-id="site1"] .page-title {
  color: #ff0000;
}
[data-page-id="site1"] .page-content {
  background: #ff0000;
}
[data-page-id="site2"] .page-title {
  color: #dd4400;
}
[data-page-id="site2"] .page-content {
  background: #dd4400;
}

＆＃13;

<div data-page-id="site1">
  <div class="page-title">Site 1 Title</div>
  <div class="page-content">Site 1 Content</div>
</div>
<div data-page-id="site2">
  <div class="page-title">Site 2 Title</div>
  <div class="page-content">Site 2 Content</div>
</div>

＆＃13;

如果您有许多这样的data-page-id值，那么您也可以使用循环来避免多次编写同一段代码。

或者，您可以为适用于所有页面的常用规则（如下所示）和一个特定于站点的文件编写一个较少的常用文件，该文件将包含@color个变量＆＃39;值，然后导入公共文件。

/* settings.less - common settings */

.page-title {
    color: @color;
}
.page-content {
    background: @color;
}    

/* site specific file - site1.less*/

@import settings.less;
@color: #f00;

更改具有不同属性的变量

1 个答案: