06-control-logic.scss

// CONTROL LOGIC

// Ref: https://speakerdeck.com/u/beausmith/p/less-tips-tricks-best-practices

// HTML
<div class="pseudo-meter value-2">2</div>
<div class="pseudo-meter value-1">1</div>
<div class="pseudo-meter value-5">5</div>


// SCSS
.pseudo-meter {
  display: block;
  height: 20px;
  text-indent: -9999px;
  background-color: gray;

  @for $i from 0 through 10 {
    &.value-#{$i} {
      width: $i * 10%;
      @if $i > 7 {
        background-color: red;
      }
    }
  }
} 

// output css
.pseudo-meter {
  display: block;
  height: 20px;
  text-indent: -9999px;
  background-color: gray;
}
.pseudo-meter.value-0 { width: 0%; }
.pseudo-meter.value-1 { width: 10%; }
.pseudo-meter.value-2 { width: 20%; }
.pseudo-meter.value-3 { width: 30%; }
.pseudo-meter.value-4 { width: 40%; }
.pseudo-meter.value-5 { width: 50%; }
.pseudo-meter.value-6 { width: 60%; }
.pseudo-meter.value-7 { width: 70%; }
.pseudo-meter.value-8 { width: 80%; background-color: red; }
.pseudo-meter.value-9 { width: 90%; background-color: red; }
.pseudo-meter.value-10 { width: 100%; background-color: red; }



// Ruby used for HTML
- (1.10).each do |num|
  .div{:class => "pseudo-meter value-#{num}" }
    = num