是否可以在LESS中创建可重用模板?

时间:2019-09-22 06:32:33

标签: css function less

假设我的应用程序中有两个原色“模式”。

  1. 黑暗模式/ CSS:
[data-theme="dark"] {
  * {
    background-color: black;
    color: white;
  }
}
  1. 灯光模式/ CSS:
[data-theme="light"] {
  * {
    background-color: white;
    color: black;
  }
}

以上CSS可以正常工作,但是任何修改都会迫使您复制粘贴或进行多余的更改。

我想要一些通用模板。

.palette(@color1, @color2) {
  * {
    background-color: @color1,
    color: @color2,
  }
}

并在以后像这样使用它

  [data-theme="dark"] {
    .palette(@backgroundDark, @textDark)
  }

  [data-theme="light"] {
    .palette(@backgroundLight, @textLight)
  }

这样,我可以重复使用模板并仅在一个地方进行编辑。我们可以用LESS做些什么吗?

0 个答案:

没有答案