如何将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代码，而不是执行

<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>

​