SCSS中的Flexbox多类选择器

Question

scss中的灵活基础列表有什么简略语法吗？我正在为10+多个字段设置它们。提供下面的简单示例，

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

电流：

.fielda {
    flex-basis: 20%;
}

.fieldb {
    flex-basis: 50%;
}

.fieldc {
    flex-basis: 30%;
}

etc,

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

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

我们使用的是角7框架，寻找类似的速记语法。

Answer 1

感觉就像你想要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行更分散，有时对于不同的div，我可能有12、38、8、42。

使用一个列表：

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

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

Answer 2

您可以在SCSS中使用以下简单计算来设置多个元素的flex基础。

$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的基值，并根据元素的样式进行调整。

希望这会有所帮助:)