【问题标题】: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>

【讨论】:

猜你喜欢
  • 2021-02-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-13
  • 2017-12-22
  • 1970-01-01
  • 1970-01-01
  • 2020-01-06
相关资源
最近更新 更多