Css SASS规则重用

我有一组不同颜色的图标，每种颜色使用CSS类声明的不同状态。例如，

给出一个灰色的应用程序图标，而

给出一个白色的应用程序图标

以下代码是用SCSS编写的

span.icon {
    display: inline-block;
    width: 32px;
    height: 32px;

    &.icon--app {
        background: url(../images/app_gray.png);

        &.icon__selected {
            background: url(../images/app.png);
        }

        &.icon__light {
            background: url(../images/app_gray.png);

            &.icon__selected {
                background: url(../images/app_white.png);
            }
        }
    }

    &.icon--device {
        background: url(../images/device_gray.png);

        &.icon__selected {
            background: url(../images/device.png);
        }

        &.icon__light {
            background: url(../images/device_gray.png);

            &.icon__selected {
                background: url(../images/device_white.png);
            }
        }
    }
}

---

问题是，上面有一长串CSS规则，它们与

app

和

device

以及其他图标有很多相似之处。我想知道是否可以使用SASS简化这些CSS规则？

我认为您可以在SASS中使用

mixin

：

e、 g

---

我为您创建了一个mixin：

@mixin icon($type) {
  &.icon--#{$type} {
    background: url(../images/#{$type}_gray.png);

    &.icon__selected {
      background: url(../images/#{$type});
    }

    &.icon__light {
      background: url(../images/#{$type});

      &.icon__selected {
        background: url(../images/#{$type}_white.png)
      }
    }
  }
}

span.icon {
  display: inline-block;
  width: 32px;
  height: 32px;

  @include icon(app);

  @include icon(device);
}

---

您是否检查过CSS以查看它是否生成了您期望的样式？我怀疑它产生的影响超出了需要。这个问题可能更适合CodeReview.SE（你应该可以申请一个mod来转移它）。从这个代码中很难看出你的意图。我编辑了你的SASS，它产生了。没有太多的重复。只是一些背景声明。尽管您可以将其包装在mixin中，以减少类型声明的数量。请投票支持与我的mixin声明惊人地相似@而且回答时间也非常相似！：）

@mixin icon($type) {
  &.icon--#{$type} {
    background: url(../images/#{$type}_gray.png);

    &.icon__selected {
      background: url(../images/#{$type});
    }

    &.icon__light {
      background: url(../images/#{$type});

      &.icon__selected {
        background: url(../images/#{$type}_white.png)
      }
    }
  }
}

span.icon {
  display: inline-block;
  width: 32px;
  height: 32px;

  @include icon(app);

  @include icon(device);
}