请解释SCSS变量

Question

谁能解释有关SCSS和基本知识，了解如何使用变量，运营商，混入，并谐音？

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使用一饮而尽，咕噜的WebPack等