Style-dictionary: Add mixin format for scss variables

[surajkc599]

Normally we would use scss variables format to get the output in the following way. One of the example could be like below:

FileName: button-light.scss
$component-button-primary-background-color: #2b3e4b;

Lets imagine if we had to support for multiple themes we would have multiple files of scss variables. Dynamically importing scss variables based on theme is still not possible or not a straight way of doing it.

If Style-dictionary outputs like below:

@mixin button-light {
$component-button-primary-background-color: #2b3e4b;
}

we could then at the application side perform below:
:host-context(.light) {
@include button-light;
}

Could you please help me in creating a new formatter specially in my case. I would also think people would also benefit from this?

[surajkc599]

It was so easy to solve it myself. In love with style-dictionary :)