如果在空节目中的混音符中默认

发布于 2025-02-13 11:02:31 字数 234 浏览 0 评论 0原文

是否可以使用可以覆盖当前代码块的混合蛋白？我想拥有它，以便如果@mixin为空，盒子的背景将是空的，然后以橙色显示，但是当我删除@mixin时，它不会更改为橙色？我在做什么错？

@mixin box {
  background: red;
}

.box {
  @if box {
    @include box;
  } @else {
    background: orange;
  }
}

原文

Is it possible to have a mixin that can override a current code block? I want to have it so that if the @mixin is empty the background for the box would be empty and then show in orange, but when I remove the @mixin it does not change to orange? What am I doing wrong?

@mixin box {
  background: red;
}

.box {
  @if box {
    @include box;
  } @else {
    background: orange;
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苄①跕圉湢 2025-02-20 11:02:31

$ color：null仅用于设置值，如果您没有传递@mixin的值。之后，您可以使用@if @else轻松地在@mixin内检查。

SASS

@mixin background-color($color: null) {
  @if($color) {
    background-color: $color;
  } @else {
    background-color: orange;
  }
};

h1 {
  @include background-color(red);
 }

h2 {
  @include background-color(green);
}

h3 {
   @include background-color();
}

h4{
  @include background-color(blue)
}

HTML

<h1>color</h1>
<h2>color 2</h2>

The $color: null is just for setting a value if you didn't pass a value for your @mixin. after that you can check easily inside your @mixin using @if @else.

Sass

@mixin background-color($color: null) {
  @if($color) {
    background-color: $color;
  } @else {
    background-color: orange;
  }
};

h1 {
  @include background-color(red);
 }

h2 {
  @include background-color(green);
}

h3 {
   @include background-color();
}

h4{
  @include background-color(blue)
}

Html