神刀安全网

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,可以用来表示是否输出样式,应用于兼容及控制代码;
  • 有些变量为复合变量,一个变量会有几个值,以减少变量个数。

参考文档

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » SASS组件开发

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮