应组织上的要求,简化前端开发,提高工作效率,开始着手研究scss框架及组件化.

把一些长的像的弄在一起,就有了组件化.

但组件只用一部分需要的,就有了定制.

下面是参考一个button组件写出的一些简单功能.

参考代码(网址:):

先摘一小段.

//// 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文件的大小,去掉原来组件中没有用到的东西.