SASS/SCSS 在扩展前更改变量值

Question

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

我只想在 @extend 评估之前覆盖 $grid-float-breakpoint 一次。现在我有 3 个扩展基本引导类的类（它们使用默认值，所以我不想弄乱它们）。

在文档中使用 mixins 并包含它是可能的。是否可以使用 .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;
    }

Answer 1

要实现你的需要，你必须使用@mixin 而不是@extend，下面是一个例子：

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

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

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