CODEWITHSUNDEEP
csssass
AlexG
AlexG

Reputation: 5929

sass math with multiple declaration

So i have this little problem I want to avoid.

$var: 30px;

font: 25px/25px font,font,font;                   //Works
font: ($var - 5)/($var - 5) font, font, font;     //Works not
font: ($var - 5px)/($var - 5px) font, font, font; //Works not

margin: 0 0 20px 0;                               //Works
margin: 0 0 ($var - 10) 0;                        //Works not
margin: 0 0 ($var - 10px) 0;                      //Works not

Basically I have a width in a Variable that gets substracted multiple times. That it seems to be the problem is that it tries to divide both numbers with the slash.

I could use it like that:

margin-top: 0;
margin-right: 0;
margin-bottom: ($var - 10px);
margin-left: 0;

But this seems like a untidy method.

Upvotes: 0

Views: 137

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

I've tested this snippet on Sassmeister with SASS v.3.2.19

div {
  font: ($var - 5)#{"/"}($var - 5) font1, font2;     
  margin: 0 0 ($var - 10) 0; 
}

and the output is

div {
  font: 25px/25px  font1, font2;
  margin: 0 0 20px 0;
}

For the font I've escaped the / symbol, otherwise sass will try to execute a division

Upvotes: 1

AlexG
AlexG

Reputation: 5929

Ok right after posting this, my colleague found the answer: 

#{$var - 5}/#{$var - 5}

Upvotes: 0

Related Questions