快速设置CSS中元素的高度和宽度 [英] Shorthand to set height and width of an element in CSS

问题描述

基本问题，但是我在任何地方都找不到，是否可以在同一行上同时设置宽度和高度，在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?

我不是要求类似：

width:100%;height:100%;

但更像是其中之一：

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

我只是询问声明，而不是Javascript如何做那。
我对此发现了一个相关问题

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.

如果不能使用CSS，那么是否使用SCSS？

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

推荐答案

设置 height 和 width 该元素在一个属性声明中。你不能用SASS做。

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.

但是，SASS将通过声明一个变量为您提供一个保存两个属性共享的公共值的功能。像

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;
}

如我所说，即使SASS也不会帮你写 height 和 width ，但您可以使用从单个变量更改两者的值。

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我要在答案中添加 @extend ，但由于其他用户已经）

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
}

我建议你使用声明％而不是。，所以代替使用 .size 建议使用％size 。这样，$ .size 的仅用于扩展目的的文字类不会包含在已编译的样式表中。

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.

这篇关于快速设置CSS中元素的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！