Question

有没有办法缩短这段代码并重复使用重复的两行 - 第一行和第三行？我尝试过使用@extend（将.gradient类添加到我的html中，之后添加.gradient - 1等）但它不能正常工作，也不能嵌套。我也尝试过mixin，但无法弄清楚如何在其中“保存”两个属性。这是我的css：

.gradient--1 {
  padding-left:20px;
  background:linear-gradient($gradient1, $gradient1a) no-repeat bottom left;
  background-size:5px calc(100% + 1em);
}

.gradient--2 {
  padding-left:20px;
  background:linear-gradient($gradient2, $gradient2a) no-repeat bottom left;
  background-size:5px calc(100% + 1em);
}

.gradient--3 {
  padding-left:20px;
  background:linear-gradient($gradient3, $gradient3a) no-repeat bottom left;
  background-size:5px calc(100% + 1em);
}

.gradient--4 {
  padding-left:20px;
  background:linear-gradient($gradient4, $gradient4a) no-repeat bottom left;
  background-size:5px calc(100% + 1em);
}

.gradient--5 {
  padding-left:20px;
  background:linear-gradient($gradient5, $gradient5a) no-repeat bottom left;
  background-size:5px calc(100% + 1em);
}

Answer 1

mixin是一种可重复使用的样式规则块。您可以使用参数来描述如何使用参数，然后 - 当您包含参数时，将参数传递给它/尽可能多的参数。还有一些方法来设置默认值和东西/但是不可否认，我发现文档令人困惑。

@mixin special-gradient($a, $b) {
  padding-left:20px;
  background:linear-gradient($a, $b) no-repeat bottom left;
  background-size:5px calc(100% + 1em);

.gradient--1 {
  @include special-gradient(red, blue);
}

.gradient--2 {
  @include special-gradient(green, blue);
}

...

或者，您可以使用extend来扩展类

.setup-class {
  padding-left:20px;
  background-size:5px calc(100% + 1em);
}

.gradient--1 {
  @extend .setup-class;
  background:linear-gradient(red, blu) no-repeat bottom left;
}

.gradient--2 {
  @extend .setup-class;
  background:linear-gradient(red, blu) no-repeat bottom left;
}

...

或者两者兼而有之。看看输出文件虽然......看看每个场景中到底发生了什么〜所以你可以看到你的CSS实际上是从另一端出来的。

http://sass-lang.com/guide#topic-6

比较手写笔的乐趣...

special-gradient($a, $b)
  background: linear-gradient($a, $b) no-repeat bottom left

.gradient-1
  special-gradient(red, blue)

有没有办法使用Sass缩短此CSS？

1 个答案:

比较手写笔的乐趣...