SASS/SCSS 在继承前更改变量值

Question

我有Bootstrap 3.3.7和自定义的scss文件。

我想在@extend评估之前仅一次覆盖$grid-float-breakpoint。目前我有3个类扩展基本的bootstrap类（它们使用默认值，所以我不想混淆它们）。

在文档中，使用mixin和include是可能的。是否可以使用.class和@extend？

我正在寻找像这样的东西

    $foo : 1px;

    .normal-class {
      font-size: $foo;
    }

    .extended-normal-class {
      @extend .normal-class;
      font-color: yellow;
    }

    -- This is what I'm trying to do: ---------------------
    .override-class {
      $foo: 3px;
      @extend .normal-class; 
     // font-size in this class after compile should have 3px;
    }

- Mike Quoro

Answer 1

为了实现你所需的功能，你必须使用@mixin而不是@extend，以下是一个示例：

@mixin size($size: 1px){
   font-size: $size;
}

.extended-normal-class{
   @include size();
}

.override-class{
   @include size(3px);
}

- João Deroldo

---

当使用Bootstrap类时，您会有很多内部依赖关系。仅供讨论，假设在'.normal-class'中有15个$foo使用情况。 当然，我们可以手动覆盖它们所有，但也许有一种好的方法只是为这个和唯一的@extend（在'override-class'中）覆盖基本的$foo变量。 - Mike Quoro

@MikeQuoro，所以您想在每个新扩展中增加字体大小？ - João Deroldo

在扩展中，我只想更改一次已解析的 $foo 变量的值。 - Mike Quoro

根据最后一条评论更改了答案。@MikeQuoro - João Deroldo

我无法将外部类更改为mixin。在问题中，我提到了我知道可以使用mixin和include来实现，但是我没有来自Bootstrap的mixin。Bootstrap只提供类。 - Mike Quoro