: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);
    }

How can I make it to a single line? by reducing the duplicates of this code

推荐答案

I don't think you can reasonably do this with a single line.

You could do simplify it with Sass/Scss:

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

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

Which generates the 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);
}

Javascript相关问答推荐

如何对 CSS Select 器进行分组

带有双星号 javascript 的正则表达式

将数组的字符串转换为数组js

在 bootstrap 程序中自定义导航选项卡

无法在Vue js中的v-for循环中动态地将props 传递给组件

discord.js v14 中的 setPresence 活动类型只能设置为“正在播放”

JS中的函数http没有响应

反转二叉树 Js Leet 问题 - 对返回的变量感到困惑

如何在同一个对象键下存储不同类型的函数?

是否可以使用 Prettier 删除未使用的导入?

如何完全隐藏 Link React 组件?

有条件地判断上下文中的值,然后在登录后在 React 中的同一函数调用中导航

未初始化值和未定义值之间的差异

导航('/')不导航

React router v6 在路由上遇到空白页

如何将多个集合合并为一个具有自己最终文档形状的集合?

如何在 React 中动态添加项目以 Select 标签选项(下拉菜单)

使用 MobX 状态时 Antd modal 不打开/关闭

如何从JS中的两个数组列和行制作矩阵?

使用跨不同组件的自定义挂钩react 、更新和检测 localStorage 更改