CODEWITHSUNDEEP
csssassscss-mixinscss-calc
Muhammad Bilawal
Muhammad Bilawal

Reputation: 474

assign @debug or @function @return value to variable in SCSS

Is there any way to pass value to a $variable through @function or @debug I am using multiple Calc methods when it combines in mixins calc() inside calc() don't work. For example

Html

<div class="misc"></div>

SCSS

@function cont-full() {
    @return calc(100vw - 32px);
}

$container-width: cont-full();
.misc {
    width: $container-width;
}

When I inspect result in window it pints result like this

.misc {
    width: calc(100vw - 32px);
}

But what I want is calculated value for example 1520px in browser like below

.misc {
    width: 1520px;
}

Please guide Thanks.

Upvotes: 1

Views: 462

Answers (1)

yeshansachithak
yeshansachithak

Reputation: 840

Try something like below.

Create scss function

@function -rc($s, $m) {
  $result: #{$s*$m}px;
  @return $result;
}

Using the function

#logo_widget {
  position: absolute;
  width: -rc(220, 3);
  height: -rc(90, 3);
  margin: -rc(20, 3) -rc(40, 3);
  top: 0;
  left: 0;
}

It generates below css

#logo_widget {
    position: absolute;
    width: 660px;
    height: 270px;
    margin: 60px 120px;
    top: 0;
    left: 0
}

Hope this will help you. Good luck!

Upvotes: 1

Related Questions