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.