css - 需要将 CSS 转换为所需格式的 SCSS

Question

我想使用变量或方法将下面提到的 CSS 格式转换为 SCSS。请建议如何实现。

CSS 格式为：

.section-1-1{
 margin-left:0;
}
.section-1-1 + .section-1-2 {
    margin-left: 15px;
}
.section-1-1 + .section-1-3 {
    margin-left: 15px;
}

.section-2-1{
 margin-left:0;
}
.section-2-1 + .section-2-2 {
    margin-left: 15px;
}
.section-2-1 + .section-2-3 {
    margin-left: 15px;
}

注意：我可能不得不写得更像 .section-3-1, .section-4-1.... 反之亦然。

标签： csssass

Answer 1

您可以像这样清理代码，sass无需创建变量。

.section-1-1 {
    margin-left: 0;
    + {
        .section-1-2 {
            margin-left: 15px;
        }
        .section-1-3 {
            margin-left: 15px;
        }
        .section-x { } ...
    }
}
.section-2-1 { .... }

如果你有很多类，你可以循环创建类。

@for $i from 1 through 3 {
  .section-#{$i}-1 {
      margin-left: 0px;
  }
  @for $j from 1 through 3 {
        .section-#{$i}-1 + .section-#{$i}-#{$j} {
            margin-left: 15px;
        }
  }
}

这将生成以下CSS.

.section-1-1 {
     margin-left: 0px;
}
 .section-1-1 + .section-1-1 {
     margin-left: 15px;
}
 .section-1-1 + .section-1-2 {
     margin-left: 15px;
}
 .section-1-1 + .section-1-3 {
     margin-left: 15px;
}
 .section-2-1 {
     margin-left: 0px;
}
 .section-2-1 + .section-2-1 {
     margin-left: 15px;
}
 .section-2-1 + .section-2-2 {
     margin-left: 15px;
}
 .section-2-1 + .section-2-3 {
     margin-left: 15px;
}
 .section-3-1 {
     margin-left: 0px;
}
 .section-3-1 + .section-3-1 {
     margin-left: 15px;
}
 .section-3-1 + .section-3-2 {
     margin-left: 15px;
}
 .section-3-1 + .section-3-3 {
     margin-left: 15px;
}