[Vuejs]-How do I use sass to make my class name dynamic depending on vue.js binding?

by

3👍

✅

You can use something like this

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

Documentation

👤Herbert Lago

1👍

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>
👤Amir Naeem

Leave a comment