Stéphane J. Stéphane J. - 1 month ago 11
Sass (Sass) Question

Shorthand to set height and width of an element in CSS

Basic question but I can't find it anywhere, is it possible to set the width and the height on the same line at the same time with the same value in my CSS?

I'm not asking for something like:

width:100%;height:100%;


But more like one of those:

width, height: 100%; // Same for both
width, height: 100%, 90%; // Different for each ones
dimensions: 100% 90%; // Like padding/margin,


I'm just asking about declaration, not Javascript on how to do that.
I found a related question to this one but for border and the short answer was no.

If it's not possible with CSS, is it with SCSS ?

Answer Source

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.