ネイティブJavascriptでCSS Mixinsを適用するにはどうすればよいですか？私のブラウザがCSSプロパティからネイティブ実装されている場合

Question

その後、私はCSSの変数を行うことができますように、あまりにもミックスインを操作するためのJavascript APIのいくつかの並べ替えを持っている必要があります。

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

私はそれをGoogleで検索しかし悲しいことに、私ほとんどの場合悲しいことに私はそれについてのAPIドキュメントを見つけることができませんでした、誰かがそれを行う方法を知っている、JavaScriptのCSS mixinを作るために何らかの種類のハックを持っているcssフレームワークにrunned？

HTMLElement.styleはCSSStyleDeclarationですが、APIを持っているのですが、setPropertyメソッドしか見つけられませんがsetMixinメソッドはありません。

PROGRESS：

私はスタイルに追加した場合、その後のmixinが適用されない@apply --some-mixin;属性。今では、カスタムインラインCSSを作成してドキュメントに追加することを試してみるべきだと思いますが、これはやはりまだまだやっかいな方法ですし、うまくいきません。

ここではいくつかのテスト用のスニペットがありますが、mixinの動作を確認するには、ブラウザでアクティブなWebプラットフォーム機能を実行する必要があります。

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>

Answer 1

私は私が何をしたいの溶液の正確なAPIタイプを働いていないが、ハック解決策を見つけましたが、すぐに問題を解決したい人のためのスタイル属性を取得し、追加することができます要素へのmixin directley：

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: { /*...*/ };`);