2

私のブラウザーが CSS プロパティからのネイティブ実装を持っている場合、CSS 変数でできるように、ミックスインを操作するためのある種の Javascript API が必要です。

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

私はそれをグーグルで検索しましたが、悲しいことに、cssをjavascriptとミックスインするための何らかのハックを備えたcssフレームワークに遭遇したほとんどの場合、悲しいことに、それに関するAPIドキュメントが見つかりませんでした。誰かがそれを行う方法を知っていますか?

HTMLElement.styleはAPI を持つCSSStyleDeclarationですが、setProperty メソッドしか見つけることができず、setMixin メソッドを見つけることができません。

進捗：

スタイル属性に追加すると@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>

4

1 に答える 1

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: { /*...*/ };`);
于 2016-09-16T23:17:33.590 に答える