SaSS循环使用 [英] SaSS loops for usage

问题描述

我想创建类，将特定的边距应用于我的块.例如:

I would like to create classes, that apply specific margin to my blocks. For example:

 .standard-margin-top {margin-top:10px;}
 .standard-margin-bottom {margin-bottom: 10px;}
 .small-margin-top {...}

 ...

 .large-margin-left {...}

以此类推.总共有20个类别(每个方向带有 xs ， small ， standard ， large 和 no ).是否可以使用sass循环来简化此操作?我对此很陌生.

And so on. There are 20 classes together (each direction with xs, small, standard, large and no). Is it possible to simplify this with sass loops? I'm pretty new with it.

我读过，如何用数字创建循环，但我不知道该怎么办.

I've read, how to create loops with numbers but I have no idea, what should I do here.

谢谢！

推荐答案

使用 @each 循环.

有两个大小和边距方向集合: $ sizes 和 $ directions .然后，我们使用 @each 循环遍历这些集合并生成CSS选择器.使用#{} 将变量值作为字符串插入.

There are two collections of sizes and margin directions: $sizes and $directions. Then we use @each loop to go through these collections and generate css selectors. Use #{} to insert variable value as string.

在sassmeister上的演示

$sizes: xs, small, standard, large, no;
$directions: top, right, bottom, left;

@each $size in $sizes {
  @each $direction in $directions {
    .#{$size}-margin-#{$direction} {
      margin-#{$direction}: 10px;
    }
  }
}

这篇关于SaSS循环使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！