如何对 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>