SASS组件开发

SASS组件开发

SASS预处理器，增长了css所没有的编程能力，带来了前端开发的效率提升，以及扩展了css的编写技巧。

组件开发

设计一个表单提示层（包括成功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