divya divya - 2 months ago 17
Sass (Sass) Question

Please Explain scss variables

Can anyone explain about scss and basics, about how to use variables,operators,mixins,and partials?

Answer
$color: red; // variable

%button-default { // placeholder (doesn't generate css)
    color: $color;
}

@mixin button() { // mixin
    @extend %button-default; // get placeholder styles

    @content;
}

button {
    @include button() { // call mixin and pass content to it
         font-size: 16px;
    }
}

a {
    @include button(); // just call mixin
}

Demo

To compile scss use gulp, grunt, webpack etc.