Wie kann ich CSS Mixins mit nativem Javascript anwenden?

Question

Wenn mein Browser native Implementierung von CSS-Eigenschaften hat, dann sollte ich irgendeine Art von JavaScript-API haben Mixins zu manipulieren, wie ich mit CSS Variablen tun könnte:

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

ich es gegoogelt aber leider den meisten Fällen I in ein css-Framework geroutet, das irgendeine Art von Hack hat, um css mixin mit Javascript zu machen, leider habe ich keine API-Dokumentation darüber gefunden, jemand weiß, wie man es macht?

Die HTMLElement.style ist eine CSSStyleDeclaration was eine API haben, aber dort kann ich nur die setProperty Methode aber keine setMixin Methode finden.

PROGRESS:

Wenn ich den Stil hinzufügen Attribut der @apply --some-mixin; dann wird die mixin nicht angewendet. Jetzt denke ich, ich sollte versuchen, benutzerdefinierte Inline-CSS und fügen Sie dem Dokument, aber das ist immer noch ein hacky Weg, es zu tun und es funktioniert auch nicht.

Hier ein paar Schnipsel zum Testen, aber amere Sie brauchen, um experimentelle Web-Plattform-Funktionen in Ihrem Browser zu sehen, um die Mixin arbeiten zu sehen!

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

fand ich eine hacky Lösung, die funktioniert, aber nicht die genaue API Art der Lösung, was ich will, aber für diejenigen, die das Problem schnell lösen möchten, können Sie den Stil-Attribut erhalten und fügen Die Mischung direkt zum Element:

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