CODEWITHSUNDEEP
csssass
amigo21
amigo21

Reputation: 391

Why are there invalid properties in this scss

I'm not able to achieve the following two properties with scss calc:

transform margin-bottom

Here's my scss:

   @for $i from 1 through 12 {
      div:first-child:nth-last-child(#{$i}),
      div:first-child:nth-last-child(#{$i})~div {
        transform: scale(calc(1-(#{$i}*.1)), calc(1-(#{$i}*.1)));
        margin-bottom: calc(20-#{$i})+px;
      }
    }

This is my output css for i=1:

div:first-child:nth-last-child(1),
div:first-child:nth-last-child(1) ~ div {
  transform: scale(calc(1-(1*.1)), calc(1-(1*.1)));
  margin-bottom: calc(20-1)px;
}

However I keep getting invalid property value for both css properties when inspecting with chrome dev tools. Any idea why this might be happening?

Upvotes: 0

Views: 626

Answers (1)

hellojebus
hellojebus

Reputation: 3593

You need to have spaces around the math operators (-, +, *, %) and include their unit type.

Your example:

transform: scale(calc(1-(1*.1)), calc(1-(1*.1)));
margin-bottom: calc(20-1)px;

Correct usage:

transform: scale(calc(1 - (1 * .1)), calc(1 - (1 * .1)));
margin-bottom: calc(20px - 1px);

Note that this applies to CSS in general, not specific for SCSS.

Upvotes: 2

Related Questions