如何對 css 選擇器進行分組

Question

:host([aspect-ratio='square']) img {
      aspect-ratio: var(--ratio-square);
    }
    :host([aspect-ratio='landscape']) img {
      aspect-ratio: var(--ratio-landscape);
    }
    :host([aspect-ratio='portrait']) img {
      aspect-ratio: var(--ratio-portrait);
    }
    :host([aspect-ratio='widescreen']) img {
      aspect-ratio: var(--ratio-widescreen);
    }
    :host([aspect-ratio='ultrawide']) img {
      aspect-ratio: var(--ratio-ultrawide);
    }
    :host([aspect-ratio='golden']) img {
      aspect-ratio: var(--ratio-golden);
    }

我怎樣才能使它成為單行？ 通過減少此代碼的重復

Answer 1

我認為你不能用一條線合理地做到這一點。

你可以使用 Sass/Scss 來簡化它：

$ratios: "square", "landscape", "portrait", "widescreen", "ultrawide", "golden";

@each $ratio in $ratios {
    :host([aspect-ratio='#{$ratio}']) img {
      aspect-ratio: var(--ratio-#{$ratio});
    }
}

生成 CSS：

:host([aspect-ratio='square']) img {
    aspect-ratio: var(--ratio-square);
}

:host([aspect-ratio='landscape']) img {
    aspect-ratio: var(--ratio-landscape);
}

:host([aspect-ratio='portrait']) img {
    aspect-ratio: var(--ratio-portrait);
}

:host([aspect-ratio='widescreen']) img {
    aspect-ratio: var(--ratio-widescreen);
}

:host([aspect-ratio='ultrawide']) img {
    aspect-ratio: var(--ratio-ultrawide);
}

:host([aspect-ratio='golden']) img {
    aspect-ratio: var(--ratio-golden);
}

Answer 2

我想不出任何 CSS 唯一的解決方案。 您基本上需要能夠讀取屬性的內容（ attr()應該能夠做到這一點），然后使用它來組成一個新的 CSS 變量。 最后一步問題更大，我認為沒有任何方法可以在 CSS 中組合字符串並將它們傳遞給var()之類的函數。

我本來希望新的@property規則允許我們圍繞它做一些事情，但是當我嘗試將var(--css-var)值引用為完全失敗的syntax時（我必須承認沒有真正的驚喜）。 即使這確實有效，我也不確定attr()是否可以在那里使用。 attr()產生<string>並且我認為沒有辦法將<string>轉換為變量名。

所以我能想到的最好的 CSS+HTML 解決方案是修改你的 HTML 代碼，而不是做

<my-elem aspect-ratio="square">content</my-elem>

你做

<my-elem style="--ratio:var(--ratio-square)">content</my-elem>

正如你所看到的，這是一個多一點的字符，但保持相對可讀，然后你的 CSS 可以變成

:host([style*="--ratio:"]) img { aspect-ratio: var(--ratio) }

 class MyElem extends HTMLElement { constructor() { super(); const style = document.createElement('style'); const img = new Image(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(style); shadowRoot.appendChild(img); style.textContent = ` img { width: 150px; border: 1px solid; }:host([style*="--ratio:"]) img { aspect-ratio: var(--ratio); } `; } } customElements.define("my-elem", MyElem);

 :root { --ratio-square: 1/1; --ratio-landscape: 4/3; --ratio-golden: 1/1.618; }

 <my-elem style="--ratio:var(--ratio-square)"></my-elem> <my-elem style="--ratio:var(--ratio-landscape)"></my-elem> <my-elem style="--ratio:var(--ratio-golden)"></my-elem>

但是鑒於您在 ShadowDOM 中，您實際上可以保留該屬性並使用您的 CustomElement 的構造函數在構造時設置正確的 CSS 變量：

 class MyElem extends HTMLElement { constructor() { super(); const style = document.createElement('style'); const img = new Image(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(style); shadowRoot.appendChild(img); const ratio = this.getAttribute("aspect-ratio"); style.textContent = ` img { width: 150px; border: 1px solid; }:host([aspect-ratio]) img { aspect-ratio: var(--ratio-${ratio}); } `; } } customElements.define("my-elem", MyElem);

 :root { --ratio-square: 1/1; --ratio-landscape: 4/3; --ratio-golden: 1/1.618; }

 <my-elem aspect-ratio="square"></my-elem> <my-elem aspect-ratio="landscape"></my-elem> <my-elem aspect-ratio="golden"></my-elem>