Advanced SASS

advance.sass

$counter: 3;
$color : red;
$color-odd : 'odd';
$color-even :'even';

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));
  @return $randomNum;
}


@for $i from 1 through $counter {
    $size: randomNum(100,300);
    li:nth-child(#{$i}) {
       color :  $color
    }
    li{
      &.test-#{$i}{
         font-size :  $size+px
      }
    }
    
    @if ($i % 2 == 1) {
      div{
        font: $color-odd ;
      }
    } @else {
         div{
        font: $color-even;
      }
    }
}

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}


@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: $value / $ratio;
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}