Question

我的SASS文件中有以下内容用于显示标志。我想从中创建三个类，以便我可以使用小型，中型和大型标志。

.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.flag-icon {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 1em;
  line-height: 1em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 1em;
  }
}

@mixin flag-icon($country) {
  .flag-icon-#{$country} {
    background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
    &.flag-icon-squared {
      background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
    }
  }
}

如果我想创建三种尺寸，我是否只需创建三个单独的块，或者是否有办法创建子元素，以便不必重复公共部分。

初学者的方法，即我，就是这样：

.flag-icon-sm {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 1em; // 1em for small
  line-height: 1em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 1em;
  }
}

.flag-icon-md {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 2em; // 2em for medium
  line-height: 2em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 2em;
  }
}

.flag-icon-lg {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 3em; // 3em for large
  line-height: 3em;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 3em;
  }
}

Answer 1

由于您的变量大小在整个标志样式中保持一致，因此您可以轻松地进行混合以实现此目的：

@mixin flag-icon-styles($size: 1em) {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * $size;
  line-height: $size;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: $size;
  }
}

.flag-icon-sm {
  flag-icon-styles(1em);
}

.flag-icon-md {
  flag-icon-styles(2em);
}

.flag-icon-lg {
  flag-icon-styles(3em);
}

http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code

派生的SASS课程

1 个答案: