应组织上的要求,简化前端开发,提高工作效率,开始着手研究scss框架及组件化.
把一些长的像的弄在一起,就有了组件化.
但组件只用一部分需要的,就有了定制.
下面是参考一个button组件写出的一些简单功能.
参考代码(网址:http://www.bootcss.com/p/buttons/):
先摘一小段.
//////////////////////////////////////////////////////////
// SHAPES ////////////////////////////////////////////////
//////////////////////////////////////////////////////////
@each $unicorn-btn-style in $unicorn-btn-types { // .button-rounded .button-pill button-circle
#{$unicorn-btn-namespace}-#{$unicorn-btn-style} { @if $unicorn-btn-style == 'rounded' {
@include border-radius(3px);
} @else if $unicorn-btn-style == 'pill' {
@include border-radius(50px);
} @else if $unicorn-btn-style == 'circle' {
@include border-radius($unicorn-btn-circle-size * 2);
@include box-shadow(inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .20));
width: $unicorn-btn-circle-size;
line-height: $unicorn-btn-circle-size;
height: $unicorn-btn-circle-size;
padding: 0px;
border-width: 4px;
font-size: $unicorn-btn-largefs;
}
}
}
文件结构:
首先是文件结构,组织好,便于开发.
/┳partial/┳━_button.scss
┃ ┣━_dialog.scss
┃ ┣━_select.scss
┃ ┗━_checkbox.scss
┣base/┳━base.scss
┃ ┗━var.scss
┣━main.scss
┗...
组件文件 -- 参数设置:
在组件文件中,首先根据需求设定默认参数,如形状,大小,高度等.
/* 设置参数 */
// 基础名称 -- 可修改
$button-name: ".button" !default; // 类型 -- 可选
$button-type: "rounded" !default;
// 大小 -- 可选
$button-size: "small","middle","big" !default;
// 颜色 -- 可选
$button-color: "gray","green" !default; // 高度 -- 可选可改
$button-height: 24,30,36 !default; // 默认32
// padding(横向) -- 可选可改
$button-padding: 24,30,40 !default; // 默认25.6
// margin(横向) -- 可选可改
$button-margin: 8,10,16,20,30 !default; // 默认0
可修改: 第一个是类似于命名空间的东西,即这个组件所生成的class都是以 .button- 开头的.
可选: 中间是一些在组件内已经写好的内容,从中选择你需要用的就可以.
可选可改: 下面是根据一些特殊的情况而增加的样式,可以自己设定想要的值(具体见下面主文件引用部分).
组件文件 -- 内部实现:
对于 可修改(命名空间) 部分,主要体现在类名如 .#{$button-name} 或 .#{$button-name}-#{$type} 中,生成的CSS文件就是以 .button- 开头的class名.
对于 可选 部分,主要用 @if 区分判断,实现如下:
// 形状
@each $type in $button-type { // 普通按钮
@if $type == "rounded" {
&-#{$type} {
border-radius: 3px;
}
}
}
(刚开始写...只扒过来一个形状...)
对于 可选可改 部分,那就是纯粹的循环了:
// 高度
@each $height in $button-height { &-h#{$height} {
height: #{$height}px;
line-height: #{$height}px;
}
}
主文件引用:
组件文件写好,在项目文件中,如main.scss,可以直接引用:
@import "partial/button";
这样就可以使用组件中的所有默认功能.
也可以定制:
$button-name: "ccforeverd"; // 以 .ccforeverd- 开头
$button-type: "middle"; // 只会用到这一种type
$button-height: 20,30,40; // 三个自己要用到高度
@import "partial/button"; // 最后引用文件
这样可以减少页面css文件的大小,去掉原来组件中没有用到的东西.