CODEWITHSUNDEEP
htmlcsssass
SJU
SJU

Reputation: 3272

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 ?

Upvotes: 27

Views: 39358

Answers (6)

jsantiago
jsantiago

Reputation: 21

To add onto the mixin solution by @Allrightman, you could even account for when the width and height are the same by setting a default value for the second parameter to equal the first:

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

If a user inputs a single value opposed to two, this will set them both to the same thing, covering both use cases.

Upvotes: 2

Michel Lamsoul
Michel Lamsoul

Reputation: 287

My little contribution if both w & h are equals :

div {
  width: 100%;
  aspect-ratio: 1;
}

This doesn't help much in typing, but with this, there is only one place to update.

Upvotes: 9

Allrightman
Allrightman

Reputation: 91

You can set up Sass Mixin, like this:

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

Then write just:

@include size(100%, 100%);

Upvotes: 9

amirhe
amirhe

Reputation: 2341

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

Upvotes: 9

Alireza
Alireza

Reputation: 104850

There is no way to declare height and width at the same time in pure CSS, but you can use preprocessors css like SASS or LESS to declare the value to avoid repetition, but don't forget that after they get complied to CSS, they become pure CSS again...

Fo example in SASS you can do:

$width-height: 100%;

body {
  height: $width-height;
  width: $width-height;
}

So as you see, you can define it, but after it gets complied to CSS, it becomes like this again:

body {
  height: 100%;
  width: 100%;
}

But we all know this is not always the case, the CSS for the big applications could be much more complex, and reusing and declaring values using preprocessors css will help a lot to manage your css in a tidier way!...

Upvotes: -2

Mr. Alien
Mr. Alien

Reputation: 157384

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.

Upvotes: 24

Related Questions