Question

我经常需要写一些类似的东西：

h1, h2, h3, h4, h5, h6 {
  font-family: 'myfont';
  font-weight: normal;
  &.public {
    color: $white;
  }
}

但我想仅向h1.public添加特定规则。当然，我可以补充一下：

h1.public {
  font-size: 2em;
}

但这是因为我的例子很简单，但这并不是真的干。我想要的是将它包装在我的代码中。类似的东西：

h1, h2, h3, h4, h5, h6 {
  font-family: 'myfont';
  font-weight: normal;
  &.public {
    color: $white;
    &:only(h1) {
      font-size: 2em;
    }
  }
}

就像media queries工作一样。

有没有办法可以做到这一点？

Answer 1

你有不同的方法：

See in live

/* Version 1: with @at-root */
h1 {
  @at-root &, h2, h3, h4, h5, h6 {
    font-family: 'myfont';
    font-weight: normal;
    &.public {
      color: #FFF;
    }
  }
  &.public {
    font-size: 2em;
  }
}

/* Version 2: with placeholders */
%org-heading {
  font-family: 'myfont';
  font-weight: normal;
  &.is-public {
    color: #FFF;
  }
}
@for $i from 1 to 6 {
  h#{$i} {
    @extend %org-heading;
    @if 1 == $i {
      &.is-public {
        font-size: 2em;
      }
    }
  }
}

/* Version 3: with modular approach */
.org-heading {
  font-family: 'myfont';
  font-weight: normal;
  &--public {
    color: #FFF;
    &.isFirst {
      font-size: 2em;
    }
  }
}

SASS：限制标记名称的规则

1 个答案: