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如何做到这一点。 I found a related question对于这一个，但对于边界而简短的回答是否定的。

如果CSS无法实现，是否使用SCSS？

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
}

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

Answer 2

您可以像这样设置 Sass Mixin：

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

然后只写：

@include size(100%, 100%);

Answer 3

您可以使用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更好的调试方法。

Answer 4

无法在纯 CSS 中同时声明height和width，但是您可以使用 SASS 之类的预处理器css或 LESS 声明该值以避免重复，但是不要忘记，在它们被CSS编译后，它们又再次变成纯CSS ...

您可以在SASS中进行示例：

$width-height: 100%;

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

因此，您可以定义它，但是在将其编译为CSS后，它又变成了这样：

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

但是我们都知道情况并非总是如此，大型应用程序的CSS可能要复杂得多，并且使用预处理器css重用和声明值将有助于以更整齐的方式管理css！

Answer 5

无法在纯 CSS 中同时声明height和width，但您可以使用预处理器css，例如 SASS 或者 LESS 来声明值以避免重复，但不要忘记在他们被CSS编译后，他们再次成为纯CSS ......

您可以在SASS中执行以下示例：

$width-height: 100%;

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

如你所见，你可以定义它，但在它被编译成CSS之后，它会再次变成这样：

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

但我们都知道情况并非总是如此，大型应用程序的CSS可能会复杂得多，使用预处理器css重用和声明值将有助于以更整洁的方式管理您的CSS！

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

5 个答案: