请解释scss变量

Question

任何人都可以解释 scss 和基础知识，关于如何使用变量，运算符， mixins ，以及的分音

Answer 1

$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

编译scss使用gulp，grunt，webpack等。