CODEWITHSUNDEEP
htmlcsssass
Neyo
Neyo

Reputation: 634

How to calculate multiples of percentage value in SCSS?

I have a const value $length: 12.5%.

Also I have a list with different multipliers $multipliers: ('1','2','3','4').

In @each I will be looping through all items in $multipliers and have to calculate the following formula.

FORMULA => $length * $multiplier + 1

@each $multiplier in $multipliers {
  .item-#{$multiplier} {
     top: << FORMULA >>
  }
}

Can someone assist on how to calculate the top value in SCSS, which contains percentage?

Upvotes: 1

Views: 99

Answers (1)

Roy
Roy

Reputation: 8089

You can achieve this with a SCSS @for loop.

$length: 12.5%;

@for $i from 1 through 4 {
  .item-#{$i} {
    top: ($i * $length);
  }
}

It will generate this CSS:

.item-1 {
  top: 12.5%;
}

.item-2 {
  top: 25%;
}

.item-3 {
  top: 37.5%;
}

.item-4 {
  top: 50%;
}

Example on CodePen. Use the right top CSS dropdown menu to 'View Compiled CSS'.

Upvotes: 1

Related Questions