如何将 CSS Mixins 与原生 Javascript 一起应用？答案

【问题标题】：How can I apply CSS Mixins with native Javascript?如何将 CSS Mixins 与原生 Javascript 一起应用？
【发布时间】：2016-09-15 05:58:44
【问题描述】：

如果我的浏览器有来自 CSS 属性的本机实现，那么我应该有某种 Javascript API 来操作 mixins，就像我可以使用 CSS 变量一样：

document.body.style.setProperty('--some-property', 'value');

我用谷歌搜索了它，但遗憾的是大多数情况下我遇到了一个 css 框架，该框架有某种 hack 可以用 javascript 制作 css mixin，遗憾的是我没有找到关于此的 API 文档，有人知道怎么做吗？

HTMLElement.style 是 CSSStyleDeclaration 有一个 API，但在那里我只能找到 setProperty 方法而没有 setMixin 方法。

进展：

如果我将@apply --some-mixin; 添加到样式属性，则不应用mixin。现在我想我应该尝试制作自定义内联 css 并添加到文档中，但这仍然是一些 hacky 方法，而且它也不起作用。

这里有一些用于测试的 sn-p，但请注意，您需要在浏览器中激活体验式 Web 平台功能才能看到 mixin 工作！

let container = document.getElementById('container');

for(var i = 1; i<=5; i++)
{
    let itemElement = document.createElement('DIV');
        itemElement.classList.add('item');
        itemElement.innerText = `Some added item#${i}!`;
        itemElement.style.color = `var(--item-${i}-color, blue)`;
  
    let style = itemElement.getAttribute('style');
      itemElement.setAttribute('style', `${style} @apply --item-${i};`);
  
    container.appendChild( itemElement );
}

if( true /* some sort of logic which are not important */ )
{
    container.style.setProperty('--item-2-color', 'green');
  
    // @todo add custom mixin to item#4 to be highlighted someway, and use Javascript API without this type of hacks:

    let style = container.getAttribute('style');
    container.setAttribute('style', `${style} --item-4: { margin: 10px 0; background-color: orange; color: yellow; };`);
    
}

:root {
    /* static css mixin */
    --paper-shadow: {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                  0 1px 5px 0 rgba(0, 0, 0, 0.12),
                  0 3px 1px -2px rgba(0, 0, 0, 0.2);
    };
}
  
body, #container {
  background: #eee; font-family: Arial, sans-serif;
}
  
h2 {
  text-align: center;
}

#container {
  padding: 30px;
  
  --item-3-color: red;

  /* initial css mixin from dinamic mixin */
  --item-3: {
    font-weight: bold;
  };
}

#container .item {
  background: #fff; padding: 20px 10px;
  font-size: 90%; text-align: center; letter-spacing: 1px;
  
  @apply --paper-shadow;
}

<h2>You need to activate #experimental-web-platform-features in your browser to see the mixin working!</h2>
<div id="container"></div>

【问题讨论】：

你必须检查它是如何在原生 css 中完成的。 Polymer 的 API 不支持它。你可以阅读它here。您可以阅读标记为 caveats 的部分
@a1626 我知道如何在 css 中制作 css mixin，我想制作“@apply --some--mixin-based-on-property;”并添加到元素，但我没有找到关于它的原生 javascript 实现。 Polymer Element 部分只是关于问题的糖 :) 我知道 Polymer 不支持也不会支持它。
如果 Polymer 不是问题的一部分，请随意删除您提到它的几个地方，因为它显然会分散您对主要问题的注意力。然后将问题的标题更改为您已有的粗体字。
@MikeMcCaughan 好的，我改了。我为 SEO porpuse 命名了这个标题，所以如果有人遇到这个问题，他们也可以使用 Polymer 关键字找到它。能帮个忙吗？你可以在其中添加 css-mixins 标签吗？ :) 它需要我没有的 1500 声望。

标签： javascript css ecmascript-6 css-variables

【解决方案1】：

我找到了一个有效的解决方案，但不是我想要的解决方案的确切 API 类型，但是对于那些想要快速解决问题的人可以获取样式属性并将 mixin 直接添加到元素：

let element = document.querySelector('some-element');

/* IMPORTANT!
 * do something with element.style and/or add css-property
 * before you change the style attribute!
 */

// get the current custom styles
let style = element.getAttribute('style');

// apply css mixin to the element:
element.setAttribute('style', `${style} @apply --some-mixin;`);

// set css mixin to the element:
element.setAttribute('style', `${style} --some-mixin: { /*...*/ };`);

【讨论】：