Question

我有一组不同颜色的图标，每种颜色都使用CSS类声明的不同状态。例如，<span class="icon icon--app"><span>会显示一个灰色的应用图标，而<span class="icon icon--app icon__light icon__selected"><span>则会显示一个白色的应用图标。

以下代码是用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规则？

Answer 1

我认为你可以在Sass中使用mixin：

e.g。

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

@include icon(app);
@include icon(device);

Answer 2

我为你创建了一个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);
}

SASS规则重用

2 个答案: