SASS预处理器，增加了css所没有的编程能力，带来了前端开发的效率提高，以及扩展了css的编写技巧。
设计一个表单提示层（包括成功success，警告warning，错误等状态error）组件，css需要定义基本样式字体（font-）、外内边距（padding，margin）、显示方式（display）、边框（border）以及其他相关的内容，再为单独的状态定义需要的样式。
先定义基本样式，再对每一个状态定义一套样式
<code>.tips { /* 基本颜色设置 */
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
//成功状态
.tips-success{
background-color: #47a447;
color: #fff;
}
//警告状态
.tips-warning{
background-color: #ed9c28;
color: #fff;
}
//错误状态
.tips-error{
background-color: #ed9c28;
color: #fff;
}
</code>每一种状态文字和边框颜色需要单独设置，稍显繁琐。后期扩展其它状态，如信息info、危险dange等，就是工作成本的提高。幸好SASS提供了编程能力，为我们解决这种担忧，提高了工作效率。
组件是对数据和方法的简单封装。
先来看一段js的变量声明代码
<code>var a = 1; console.log(a);//1 </code>
再看一段sass代码，是不是很简单。
<code>$color:blue;
$color:red; !default;//变量申明带有!default，表示当前值为缺省值
p{
color:$color;//输出blue
}
</code>声明!default，在这里输出blue，很有趣吧。简单说下它的作用：假设变量申明带有!default，表示此变量为默认值，可被全局的普通声明覆盖。这点还不能体现它的伟大作用。
在需要的地方使用@include来声明调用mixins。
<code>/* mixin */
@mixin tips($background,$text-color,$tipsStylePadding) {
background-color: $background;
color: $text-color;
padding: $tipsStylePadding;
margin-bottom: 20px;
border-radius: 4px;
}
</code>调用功能模块，当前的组件可扩展出多个组件样式。
<code>//成功状态
.tips-success {
@include tips($background,$text-color,$tipsStylePadding);
}
//警告状态
.tips-warning {
@include tips($background,$text-color,$tipsStylePadding);
}
//错误状态
.tips-error {
@include tips($background,$text-color,$tipsStylePadding);
}
//信息状态（再扩展一个）
.tips-info {
@include tips($background,$text-color);,$tipsStylePadding
}
</code>@include在需要的地方随意调用，不够规范，后期难以维护。
现在我们新建个scss文件，这里暂且叫做_tips.scss。
<code>/* 变量
---------------------------------*/
$background: #47a447 !default;
$text-color: #fff !default;
$tipsStylePadding: 15px !default;
/* mixin
---------------------------------*/
@mixin tips($background,$text-color,$tipsStylePadding) {
background-color: $background;
color: $text-color;
padding: $tipsStylePadding;
margin-bottom: 20px;
border-radius: 4px;
}
/*样式
---------------------------------*/
//成功状态
.tips-success {
@include tips($background,$text-color,$tipsStylePadding);
}
//警告状态
.tips-warning {
@include tips($background,$text-color,$tipsStylePadding);
}
//错误状态
.tips-error {
@include tips($background,$text-color,$tipsStylePadding);
}
//信息状态（再扩展一个）
.tips-info {
@include tips($background,$text-color,$tipsStylePadding);
}
</code>接下来我们要在所需要的文件，调用这个文件，这个组件就开发完了
<code>//导入_tpis.scss @import '_tips'; </code>
重新覆写，会产生相同的代码，这不是我们想要的组件
<code>//导入_tips.scss
@import '_tips';
.tips-success{
padding:5px;
}
/*编译后样式
---------------------------------*/
.tips-success{
background-color: #47a447;
color: #fff;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.tips-success{
padding: 5px;
}
</code>改变@include的参数，同样会产生相同的代码，也不是我们想要的组件
<code>//导入_tips.scss
@import '_tips';
.tips-success{
@include tips($tipsStyleBorder,5px);
}
/*编译后样式
---------------------------------*/
.tips-success{
background-color: #47a447;
color: #fff;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.tips-success{
background-color: #47a447;
color: #fff;
padding: 5px;
margin-bottom: 20px;
border-radius: 4px;
}
</code>这里就需要使用 !default;特性
<code>//申明$tpisStylePadding为5px
$tpisStylePadding: 5px;
//导入_tips.scss
@import '_tips';
/*编译后样式
---------------------------------*/
.tips-success {
background-color: #47a447;
color: #fff;
padding: 5px;
margin-bottom: 20px;
border-radius: 4px;
}
</code>
