如何根据 vue.js 绑定使用 sass 使我的类名动态化？答案

【问题标题】：How do I use sass to make my class name dynamic depending on vue.js binding?如何根据 vue.js 绑定使用 sass 使我的类名动态化？
【发布时间】：2021-03-18 22:32:45
【问题描述】：

目前我有这个 div，它使用 vue.js 绑定加载值。

<div :class="`progress-bar w-${progress.value}`">

在 css 中，如何使用 sass 使 css 类名动态化？也就是说如果上面的代码编译成

<div class="progress-bar w-88">

会有一个由sass生成的css类

.progress-bar.w-88 {
  width: 88%;
}

【问题讨论】：

使用动态样式 (:style) 是否适合您？
是的，它适用于动态风格。但是，唯一的问题是我还需要 hover 选择器
悬停可以应用在进度条类上，不管宽度多少
@BallonUra，可以分享代码作为答案吗？

标签： vue.js sass

【解决方案1】：

你可以使用这样的东西

@for $i from 0 through 100 {
  .progress-bar.w-#{$i} {
    width: #{$i}%
  }
}

Documentation

【讨论】：

当我尝试它时，它在width: $i% 抱怨语法错误：指定某些框的内容区域、填充区域或边框区域的宽度（取决于'box-sizing'）。语法：{1,2} 术语预期 scss
当您在 scss 中执行 @for 时，您需要使用 #{} 包装该值。而不是width: $i%;，它应该是width: #{$i}%;。您需要这样做的原因是在实际字符串而不是变量中生成值。
谢谢！ @Renesansz
@Renesansz 谢谢。在width: #{$i}%; 处仍然存在相同的语法错误。会不会是 eslint 规则的缘故？
别担心@Steve，很高兴你找到了答案?

【解决方案2】：

SCSS：

.progress-bar {
      background: #DEE2E3;
      border-radius: 99px;
      width: 200px;
      height: 5px;
      position: relative;overflow: hidden;
      
      &::before {
        border-radius: 99px;
        position: absolute;
        height: 5px;
        background: #f5c70f;
        content: '';
        width: 0;
        transition: width .2s;
      }
    }
    
    
    @for $i from 0 through 100 {
      .w-#{$i}::before { width: $i * 1% }
    }

HTML：

<div class="progress-bar w-10"></div>
 <div class="progress-bar w-88"></div>
<div class="progress-bar w-100"></div>

【讨论】：

Codepen 链接：codepen.io/amirnaeem/pen/VwKKoLP
但是，奇怪。添加悬停选择器后，它仅适用于第一个元素。