Facepunch / sbox-issues

180 stars 12 forks source link

Add SCSS operator support #7499

Open dotryen opened 1 week ago

dotryen commented 1 week ago

What can't you do?

I would like to do math on numbers in SCSS.

How would you like it to work?

Just like in SCSS. $example: 5 + 5; $example: 5 - 5; $example: 5 * 5; $example: math.div(5, 5);

What have you tried?

I've tried using the calc function but that doesnt seem to be implemented either. Math operators are just pasted into the rules instead of doing math.

Example.

$hudSkewStrength: 10deg;
$hudSkewFactor: 0.5;

$hudPresetSkewRight: rotateY($hudSkewStrength * -1) skewY($hudSkewStrength * $hudSkewFactor * -1);

$hudPresetSkewRight is literally pasted as a rule.

Image

Additional context

No response

Retroeer commented 1 week ago

Don't think this will be added, the intention is probably just doing this in the razor code itself, e.g.

 <div class="ActivityFeed" style="transform: rotateY(@(SkewStrength * -1)deg) skewY(@(SkewStrength * SkewFactor * -1)deg)"></div>
@code{
     public const float SkewStrength = 10;
     public const float SkewFactor = 0.5f;
}
dotryen commented 1 week ago

Yeah it is possible to do it via razor but doing it in SCSS simplifies the process across multiple elements. I don't want to write an extra style attribute for every element I want to have these variables on when I'm already styling them in SCSS.