Question

在CSS编码时，使用较短的属性来处理项目的宽度和高度会不会更快？
截至目前，我必须输入：

selector {dimension: 100px 250px;}

这是快的，但我认为这会更快：

grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;

是否已有可以实现此功能的CSS预处理器？似乎在做大量宽度和高度时会节省一些时间。

一个很好的例子可能是CSS Grid属性：

grid-template: 100px 100px / 100px 100px;

与：

相同

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

Answer 1

简短回答： CSSWG尚未就速记产品的名称达成一致。

这个想法并不新鲜，很多人不时地提出这个想法。但是，来自[css-sizing] Adding a 'size' shorthand for 'width'/'height'（ CSS工作组）的当前提案CSSWG。

已经讨论了很多事情，但仍有一些尚未解决。以下是一些例子：

名称是什么？

建议的一些名称：

size：与@page size - 属性冲突
dimensions：可能太长或难以拼写
box-size：可能距离box-sizing

如何运作？

应该是：

<box-size>: <width> <height>?

...或更接近其他属性，例如padding或margin：

<box-size>: <height> <width>?

另外：它是否应该支持一个能保持宽高比的附加参数？

谁会支持它？

哪些供应商会支持该提案和语法本身？
它会增强作者的体验，以便人们真正使用它吗？

正如你所看到的，未来可能会有一个简写符号，正如CSSWG最近在Minutes Telecon on 2017-08-16中所说的那样：

该小组同意“宽度”/“高度”的简写是好的，但不应称为“大小”。但是，没有时间提出不同的名称。

话虽如此，您当然可以使用CSS预处理器，让您的生活更轻松。例如，我在LESS中有一个mixin，如下所示：

.size(@a: null, @b: null) {
    & when not (null = @a) {
        width: @a;
    }

    & when (null = @b) {
        height: @a;
    }

    & when not (null = @b) {
        height: @b;
    }
}

这很简单：

.size(100%, 50%);

width: 100%;
height: 50%;

...它也支持方形元素：

.size(100%);

width: 100%;
height: 100%;

Answer 2

这是一个好主意，但此时官方规格不允许。

这就是全部。

Answer 3

我的建议（只是意见/PoV）是：将 size 替换为所选元素的 height 和 width 的简写。

示例：

size: <height> <width>;
size: 420px 297px;
size: 100% 50%;
size: 15rem 5em;

现在与 size 一起使用的 @page 的先前属性应该更改为 page-size。

示例：

来源：MDN Web Docs

/* Keyword values for scalable size */
page-size: auto;
page-size: portrait;
page-size: landscape;

/* <length> values */
/* 1 value: height = width */
page-size: 6in;

/* 2 values: width then height */
page-size: 4in 6in;

/* Keyword values for absolute size */
page-size: A4;
page-size: B5;
page-size: JIS-B4;
page-size: letter;

/* Mixing size and orientation */
page-size: A4 portrait;

为什么CSS中没有宽度和高度的速记属性？

3 个答案: