html - I want to override value of theme's inbuilt SCSS variable in my SCSS file based on color set(Theme color) inside @mixin -


i have global scss variable i.e. $accent : #3a99d5; , want override variable based on color selection inside @mixin, please refer below code more clarity.

using below code i'm able switch color of ".main-header " based on class name "green" or "orange " appending in body(refer html block) unable override $accent primary variable controls primary color of theme.

i'm not sure code. please me in fixing , in advance.

/=====scss======/

$accent:#3a99d5; /*global variable*/  $themes: ( green: #90c140, orange: #bf5700 ); /*color set*/  @mixin theme($name,$color) {      @if $name == green {         $accent: #90c140 !global;     }     @else {         $accent: #bf5700 !global;     }      .#{$name} {         .main-header {            background: $color;            }        } }   @each $key, $value in $themes {     @include theme($key, $value); } 

/====html=====/

    <body class="green"> /*how i'm using color class scss*/ <div class"main-header">  </div>     </body> 


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -