在 CSS 中设置元素的高度和宽度的简写

Question

基本问题，但我无法在任何地方找到它，是否可以在我的 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。 我发现了一个与此相关的问题，但对于边界，简短的回答是否定的。

如果 CSS 不可能，那是 SCSS 吗？

原文由 ZazOufUmI 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在单个属性声明中设置元素的 height 和 width 没有简写。你也不能用 SASS 来做。

但是，是的，SASS 将为您提供一项功能，通过声明 variable 来保存两个属性中共享的公共值

$some-var-name: 100px;

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

正如我所说，即使 SASS 也无法帮助您同时编写 height 和 width 但您可以使用单个变量更改两者的值。

---

好的，我正要在答案中添加 @extend 但由于其他用户已经回答了同样的问题，（ _现在已删除_）

 .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 .这样，您的文字类 .size 仅用于扩展目的将不会包含在已编译的样式表中。

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用 css 变量

/* 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>

然后你可以改变 --length 以多种方式和盒子的宽度和高度将尊重变化。并且它比用于调试目的的 SCSS 变量更好的方法。

文章

CSS 变量与 SCSS 变量的比较

为什么我们更喜欢 CSS 自定义属性而不是 SASS 变量

原文由 amirhe 发布，翻译遵循 CC BY-SA 4.0 许可协议