Shorthand to set height and width of an element in CSS

you can use css variable

/* css file */
:root {
  --length: 50px;
  --ratio: 1;
}
.box {
  background: cornflowerblue;
  width: calc(var(--ratio) * var(--length));
  height: var(--length);
}
<!-- html file -->
<div class="box"></div>

then you can change --length in many ways and box width and height will respect to changes. and Its better method than the SCSS variable for debugging purposes.

Articles
Comparison between CSS variable vs SCSS variable
Why we prefer CSS Custom Properties to SASS variables


There is no short hand for setting the height and width of the element in a single property declaration. You cannot do it with SASS as well.

But yea, SASS will provide you a feature to hold the common value shared in both property by declaring a variable like

$some-var-name: 100px;

.some-class {
  height: $some-var-name;
  width: $some-var-name;
}

As I said, even SASS won't help you writing height and width at the same time but you can use change the value of both from a single variable.


Ok I was about to add the @extend in the answer but since other user has already answered the same, (which is now deleted)

.size{
    height:100%;
    width:100%;
}

element {
    @extend .size;  //Sets element to height:100%;width:100%;
    // more stuff here
}

I would suggest you to use a declaration of % instead of . so instead of using .size suggested use %size. This way your literal class of .size used only for extend purpose won't be included in the compiled stylesheet.

Tags:

Html

Css

Sass