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
Post a Comment