Question

是否可以轻松地将left:15%;right:15%写为left,right:15%或类似的内容？

谢谢！

Answer 1

不是使用纯CSS，而是使用LESS，您可以使用变量轻松多次分配相同的值

@spacing-width: 15%;

left: @spacing-width;
right: @spacing-width;

此处有更多信息http://lesscss.org/

Answer 2

不，在纯CSS中，不可能在单个声明中组合多个属性。

但是使用像SCSS之类的CSS预处理器（例如使用像PHP scssphp这样的PHP实现），你可以编写一个这样的mixin：

<!-- 1st side bar nav -->
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px">
    <li class="list-group-item has-submenu">
        <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a>
        <ul id="ID1" class="list-unstyled collapse submenu ">
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
        </ul>
    </li>       
</ul>

<!-- 2nd side bar nav -->
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px">
    <li class="list-group-item has-submenu">
        <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a>
        <ul id="ID2" class="list-unstyled collapse submenu ">
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
        </ul>
    </li>       
</ul>

some listsome list.

<!-- 20th side bar nav -->
<ul id="sidebar-nav" class="sidebar-nav margin-bottom-30px">
    <li class="list-group-item has-submenu">
        <a href="#" align="center" class="submenu-toggle" data-toggle="collapse" data-parent="sidebar-nav"><i class="fa fa-home"></i> TEXT </a>
        <ul id="ID3" class="list-unstyled collapse submenu ">
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
            <li>
                some list
            </li>
            <li>
                some list.
            </li>
        </ul>
    </li>       
</ul>

然后像这样使用它：

@mixin left-right($value) {
    left: $value;
    right: $value;
}

会生成以下CSS：

.example {
    @include left-right(15%);
}

Answer 3

目前尚未提及，但已提出了一些将它们合并为速记属性的方法。

但对于top / left / right / bottom，我们考虑使用offset作为   逻辑属性的前缀（因此offset为   设置所有这些的简写）
   - fantasai

我喜欢这个主意，但offset似乎不太理想。如果 'position'是简写和前缀？像position: absolute 0 auto 0 0？ - Brad Kemper

实际上，纯粹是巧合，我碰巧偶然发现了一个 PostCSS插件名为“Short”，它使用了这种语法。 https://github.com/jonathantneal/postcss-short/blob/master/README.md - Brad Kemper

但是如果你只想避免重复相同的值，你可以使用CSS变量：

div {
  --side: 15%;
  left: var(--side);
  right: var(--side);
  position: absolute;
  background: red;
  height: 50px;
}

<div></div>

如何在同一行中将2个样式设置为相同的值？

3 个答案: