CODEWITHSUNDEEP
sass
Mike Quoro
Mike Quoro

Reputation: 141

SASS/SCSS change variable value before extend

I have Bootstrap 3.3.7 and custom scss files.

I want to override $grid-float-breakpoint only once before @extend evaluates. Right now I have 3 classes which extend base bootstrap class (they use default value, so i don't want to mess with them).

In doc when using mixins and include it's possible. Is it possible using .class and @extend?

I'm looking for something like

    $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;
    }

Upvotes: 3

Views: 1042

Answers (1)

João Deroldo
João Deroldo

Reputation: 465

To achiev what you need, you must use @mixin instead of @extend, heres follow an example:

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

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

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

Upvotes: 2

Related Questions