SASS组件开发
2016-03-20 11:42
253 查看
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.htmlsass揭秘之变量 /article/1214478.html
相关文章推荐
- 都要学C
- 谈谈烦人的hasLayout和BFC
- 关闭SLinux
- UVA 10655 Contemplation! Algebra(构造矩阵和快速幂)
- 转载一篇对C语言中可变参数的文章
- 多线程“基础篇”01之 基本概念
- 【160312 18:00】四则运算 2
- 事件捕获与事件冒泡
- dw1.modify(modstring)
- android之发送Get或Post请求至服务器接口
- Node.js处理I/O数据之Buffer模块缓冲数据
- 类名.this 的使用
- 王国维之人生三境界
- 学习经验之MVC添加现有SQLServer数据库
- 剑指offer学习笔记(一)
- C++ 用libcurl库进行http通讯网络编程
- Foxmail7.2账号帐号邮件备份和恢复
- Aliyun OSS Nginx proxy module(阿里云OSS Nginx 签名代理模块)
- Source Insight 工具使用记录
- 委派任务