组件开发 设计一个表单提示层（包括成功success，警告warning，错误等状态error）组件，css需要定义基本样式字体（font-）、外内边距（padding，margin）、显示方式（display）、边框（border）以及其他相关的内容，再为单独的状态定义需要的样式。
css组件开发 先定义基本样式，再对每一个状态定义一套样式
.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;}
每一种状态文字和边框颜色需要单独设置，稍显繁琐。后期扩展其它状态，如信息info、危险dange等，就是工作成本的提高。幸好sass提供了编程能力，为我们解决这种担忧，提高了工作效率。
sass组件开发 组件是对数据和方法的简单封装。
变量默认值!default 先来看一段js的变量声明代码
var a = 1;console.log(a);//1
再看一段sass代码，是不是很简单。
$color:blue;$color:red; !default;//变量申明带有!default，表示当前值为缺省值p{ color:$color;//输出blue}
声明!default，在这里输出blue，很有趣吧。简单说下它的作用：假设变量申明带有!default，表示此变量为默认值，可被全局的普通声明覆盖。这点还不能体现它的伟大作用。
@mixin应用 先声明@mixin 在需要的地方使用@include来声明调用mixins。
/* 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}
@include在需要的地方随意调用，不够规范，后期难以维护。
组件实例 现在我们新建个scss文件，这里暂且叫做_tips.scss。
/* 变量---------------------------------*/$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);}
接下来我们要在所需要的文件，调用这个文件，这个组件就开发完了
//导入_tpis.scss@import '_tips';
问题？ 组件是重复可调用的，也是对数据和方法的简单封装 如果我们对默认的padding为15px不满意，要改为5px，怎么弄 重新覆写 重新覆写，会产生相同的代码，这不是我们想要的组件
//导入_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;}
修改参数 改变@include的参数，同样会产生相同的代码，也不是我们想要的组件
//导入_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;}
正确解决方法 这里就需要使用 !default;特性
//申明$tpisstylepadding为5px$tpisstylepadding: 5px;//导入_tips.scss@import '_tips';/*编译后样式---------------------------------*/.tips-success { background-color: #47a447; color: #fff; padding: 5px; margin-bottom: 20px; border-radius: 4px;}
变量设计原则 所有变量为默认值，后面加有!default，以方便覆盖； 有些变量为开关变量，值只能是true或false，可以用来表示是否输出样式，应用于兼容及控制代码； 有些变量为复合变量，一个变量会有几个值，以减少变量个数。 参考文档 sasscore http://www.w3cplus.com/sasscore/index.html sass揭秘之变量 http://www.w3cplus.com/preprocessor/sass-basic-variable.html