scss组件定制的一些学习

应组织上的要求,简化前端开发,提高工作效率,开始着手研究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文件的大小,去掉原来组件中没有用到的东西.