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

秒客网