CODEWITHSUNDEEP
csssass
Kenny
Kenny

Reputation: 153

Scss @mixin function

I want the height of a div is 38% of the width, and the width should be 100%, so what I am trying to do is something like this:

@mixin div-dimensions ($width) {
    width: $width;
    height: $width * 38;
}

(Applying it)

@include div-dimensions (100%)

Hope that when the user resizes the window, the proportion of the div remains. But of course the above doesn't work, and the value of the height is now a ratio of the div, not the width, any suggestions? Thanks a lot!

Upvotes: 1

Views: 129

Answers (1)

Qwertiy
Qwertiy

Reputation: 21380

Calculations are compile-time, but you need runtime dependence.

You can use following approach instead:

.wrapper {
  padding-top: 38%;
  position: relative;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: silver;
}
Just some text
<div class="wrapper">
  <div class="content">
    Height is 38% of width
  </div>
</div>
Some other text

Upvotes: 1

Related Questions