divya divya - 25 days ago 4x
Sass (Sass) Question

Please Explain scss variables

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

$color: red; // variable

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

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


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

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


To compile scss use gulp, grunt, webpack etc.