避免重复属性,包括两个混合或扩展两个类。

huangapple go评论118阅读模式
英文:

SASS/SCSS Avoid duplicate properties including two mixins or extending two classes

问题

让我们假设我有两个可以使用@extend(或者可以使用@include)的类:

  1. .small-text {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. line-height: 1rem;
  5. font-size: 1rem;
  6. }
  7. .large-text {
  8. font-family: "MyFontFamily";
  9. color: black;
  10. line-height: 1.4rem;
  11. font-size: 1.4rem;
  12. }

现在,在我的SCSS中,我可以这样做:

  1. h1 {
  2. @extend .large-text;
  3. }
  4. h3 {
  5. @extend .small-text;
  6. }

但是现在假设我想要使用一个类名,或者一个媒体查询,来有选择地从小文本切换到大文本:

  1. h3 {
  2. @extend .small-text;
  3. &.big {
  4. @extend .large-text;
  5. }
  6. }

我遇到的问题是编译后的CSS会变得非常重复,如下所示:

  1. h3 {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. line-height: 1rem;
  5. font-size: 1rem;
  6. }
  7. h3.big {
  8. font-family: "MyFontFamily";
  9. color: black;
  10. line-height: 1.4rem;
  11. font-size: 1.4rem;
  12. }

有没有办法只在第二个选择器中包含从第一个选择器变化的属性?

英文:

Let's say that I have two classes that I can @extend (or two mixins I can @include) like so:

  1. .small-text {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. line-height: 1rem;
  5. font-size: 1rem;
  6. }
  7. .large-text {
  8. font-family: "MyFontFamily";
  9. color: black;
  10. line-height: 1.4rem;
  11. font-size: 1.4rem;
  12. }

Now, all throughout my SCSS, I can do things like this:

  1. h1 {
  2. @extend .large-text;
  3. }
  4. h3 {
  5. @extend .small-text;
  6. }

But now let's say that I want to use a class name, or a media query, to selective change from small to large text:

  1. h3 {
  2. @extend .small-text;
  3. &.big {
  4. @extend .large-text;
  5. }
  6. }

The problem I'm having is the the compiled CSS is going to be really duplicative, like so:

  1. h3 {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. line-height: 1rem;
  5. font-size: 1rem;
  6. }
  7. h3.big {
  8. font-family: "MyFontFamily";
  9. color: black;
  10. line-height: 1.4rem;
  11. font-size: 1.4rem;
  12. }

Is there any way to only include the changed properties in the second selector which changed from the first selector?

答案1

得分: 2

没有重复的部分,这正是您要求的。您应该做的是创建另一个类,small-textlarge-text 都使用它,叫做 text

所以它会像这样:

  1. .text {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. }
  5. .small-text {
  6. line-height: 1rem;
  7. font-size: 1rem;
  8. }
  9. h3 {
  10. @extend .text;
  11. @extend .small-text;
  12. &.big {
  13. @extend .large-text;
  14. }
  15. }

因此,当您从 smalllarge 类中扩展时,它将仅包括 line-heightfont-size

英文:

Nothing has duplicated, that is exactly what you asked for, what you should do instead is have a another class that both small-text and large-text both use called text

So it would be like this

  1. .text {
  2. font-family: "MyFontFamily";
  3. color: black;
  4. }
  5. .small-text {
  6. line-height: 1rem;
  7. font-size: 1rem;
  8. }
  9. h3 {
  10. @extend .text;
  11. @extend .small-text;
  12. &.big {
  13. @extend .large-text;
  14. }
  15. }

So when you extend from the small and large classes it will only include the line-height and font-size

huangapple
  • 本文由 发表于 2023年7月20日 08:21:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76725940.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定