sass入门

1、sass安装：

npm install -g sass

2、命令行生成css文件：

sass runoob-test.scss runoob-test.css

runoob-test.scss:

h{
    font-size:16px;
    a{
         color:red;
    }
} 

runoob-test.css:

h,a{
    font-size:16px;
}
a{
    color:red;
}

3、vue中使用sass:

安装依赖包：

npm install sass-loader --save-dev
npm install node-sass --save-dev 

.vue文件中使用sass：

<style lang="sass">
    ...
</style> 

4、sass基础语法：

@import 导入外部文件：

@import 'globals';

@extend 继承css类：

h{
    background-color:red;
    font{
        size:16px;
        weight:bold;
        family: Microsoft Yahei;
    }
} 
a{
    @extend h;
}

@mixin 定义混入 @include 引用混入 （同js函数）

参数支持设置默认值

@mixin important-text($color: red, $size: 20px){
     color: $color;
     size: $size;
}
h{
     @include important-text(blue);
}