SCSS 中的 Flexbox 多类选择器答案

【问题标题】：Flexbox Multi Class Selector in SCSSSCSS 中的 Flexbox 多类选择器
【发布时间】：2020-03-29 23:53:43
【问题描述】：

scss 中的 flex-basis 列表是否有任何简写语法？我将它们设置为 10 多个字段。下面提供一个简单的例子，

只是好奇是否存在多类选择器。

当前：

.fielda {
    flex-basis: 20%;
}

.fieldb {
    flex-basis: 50%;
}

.fieldc {
    flex-basis: 30%;
}

etc,

是否存在类似的理想语法？

.fielda, .fieldb, .fieldc{
     flexbasis: 20%, 50%, 30%
 }

我们正在使用 Angular 7 框架，正在寻找类似的简写语法

【问题讨论】：

你的理想不是有效的 CSS，所以我不确定这有什么意义。
嗨@ErikPhilips 我正在寻找类似的东西来缩短，会很好，谢谢
不，你不能缩短语法。这就是 css 的工作原理。您的“理想”语法也没有意义，因此根本不理想。

标签： css sass flexbox

【解决方案1】：

您可以通过以下 SCSS 中的简单计算来设置多个元素的 flex base。

$flex-base-value = 10%;

 .fielda {
    flex-basis: 2 * $flex-base-value;
}

.fieldb {
    flex-basis: 5 * $flex-base-value;
}

.fieldc {
    flex-basis: 3 * $flex-base-value;
}

这样，您只需更改 flex 的基本值并根据元素的样式。

希望这会有所帮助:)

【讨论】：

我正在尝试做速记语法，这不能回答问题
哦，好吧。无论如何，我希望你能得到@Erik 的回答 :)

【解决方案2】：

感觉就像您希望 SCSS 自动生成您的 CSS。如果是这种情况，您可以使用：

scss:

@for $i from 1 trough 4
  .flex-basis-#{$i} {
    flex-basis: 10% * $i;
  }

这将产生 css：

  .flex-basis-1 {
    flex-basis: 10%;
  }
  .flex-basis-2 {
    flex-basis: 20%;
  }
  .flex-basis-3 {
    flex-basis: 30%;
  }
  .flex-basis-4 {
    flex-basis: 40%;
  }

我的css行比较分散，有时候我可能有12、38、8、42个不同的div

使用列表：

$sizes: 12px, 38px, 8px, 42px;

@each $size in $sizes {
  .icon-#{$size} {
    width: $size;
  }
}

【讨论】：

谢谢，这很好，对于连续增量，我的 css 行更加分散，有时我可能有 12、38、8、42 用于不同的 div，没有真正的模式等，但是会保留介意