这个Vue的Less代码中的@media样式要怎么样才能生效？

Question

我写的这个Vue的Less样式为什么没有生效？

<template>
  <div class="grid-list">
    <slot />
  </div>
</template>
<script setup>
import {computed} from 'vue';

const props = defineProps({
  itemWidth: {
    type: String,
    default: '300px',
  },
});

const itemWidth = computed(() => {
  return props.itemWidth;
});
</script>
<style lang="less">
.grid-list {
  display: grid;
  gap: 16px;
  grid-auto-rows: minmax(172px, auto);
}

@iw: e(%('%d', v-bind(itemWidth)));

.loop(@index) when (@index < 20) {
  @media (min-width: calc(288px + 16px * (@index - 1) + @iw * @index)) {
    .grid-list {
      grid-template-columns: repeat(@index, 1fr);
    }
  }

  .loop(@index + 1);
}

.loop(1);
</style>

上面是我写的一个自定义组件，但是@media这里的代码没有生效，请问我这里少了什么步骤吗？

Answer 1

把@media的样式代码放到下面，确保嵌套层级一样，就会覆盖上面的。

Answer 2

有点绕，但是大概能明白你期望在 less 中使用当前的 itemWith 变量的值来作为计算值。

但是你要明白 less 是预处理样式，在编译阶段就已经编译成了普通的CSS了，并不会获取到项目在浏览器中运行的值。除非你的 props.itemWith 是一个固定的值比如说：

<script setup>
const testStyle = {
  itemWidth: '300px'
}

</script>
<style lang="less">
.grid-list {
  display: grid;
  gap: 16px;
  grid-auto-rows: minmax(172px, auto);
}

@iw: e(%('%d', v-bind(testStyle.itemWidth)));

.loop(@index) when (@index < 20) {
  @media (min-width: calc(288px + 16px * (@index - 1) + @iw * @index)) {
    .grid-list {
      grid-template-columns: repeat(@index, 1fr);
    }
  }

  .loop(@index + 1);
}

.loop(1);
</style>

所以要达到你期望的目标，可以使用 CSS 自定义属性 来实现。举个例子

<template>
  <div  :style="cssVars">
    <div class="grid-list">
      <slot />
    </div>
  </div>
</template>
<script setup>
import {computed} from 'vue';

const props = defineProps({
  itemWidth: {
    type: String,
    default: '300px',
  },
});

const cssVars = computed(() => {
  return {
    "--itemWidth": props.itemWidth
  };
});
</script>
<style lang="less">
.grid-list {
  display: grid;
  gap: 16px;
  grid-auto-rows: minmax(172px, auto);
}

.loop(@index) when (@index < 20) {
  @media (min-width: calc(288px + 16px * (@index - 1) + var(--itemWidth) * @index)) {
    .grid-list {
      grid-template-columns: repeat(@index, 1fr);
    }
  }

  .loop(@index + 1);
}

.loop(1);
</style>

但是不一定对，我不太确定能否在 calc() 中使用 CSS variables。