10月25, 2016

scss之button

最近一段时间在做公司的UI组件,记录一下一些笔记。

// btn
//----------------------------------------------------
// btn-basic
// 按钮基本样式,联合申明
%btn-basic {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    box-sizing: border-box;
    user-select: none;
    padding: 0 1em;
    white-space: nowrap;
}

// btn-size
// 按钮大小
@mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) {
    padding: 0 $padding;
    line-height: $height - 2px; // 减掉2px的上下高度
    @if $radius {
        border-radius: $radius;
    }
}

// btn-color
// 包括按钮背景色,文本色,是否有边框
@mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) {
    color: nth($colorText, 1);
    background-color: nth($colorBg, 1);
    @if $colorBorder {
        border-color: nth($colorBorder, 1);
    }
    &:hover,
    &:active {
        @if length($colorText) == 2 {
            color: nth($colorText, 2);
        }
        @if length($colorBg) == 2 {
            background-color: nth($colorBg, 2);
        } @else {
            @if lightness($colorBg) > 40% {
                background-color: darken($colorBg, 5%);
            }
            @else {
                background-color: lighten($colorBg, 5%);
            }
        }
        @if $colorBorder and length($colorBorder) == 2 {
            border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc
        }
    }
}

这个代码出自sandal,结一哥的杰作。之前他也传授了我不少的css经验。。虽然这个是mobile端的,但对我也有很大的借鉴的作用。

在实际应用中,我将 btn-color做了扩展,因为在PC端,可能default、active、hover会是不同的颜色。

除此之外,一般button都差不多了,无非有large、default、small、mini,然后什么waring、danger等,只要基于上面的三种class去做相应的扩展即可。

本文链接:www.my-fe.pub/post/scss-for-button.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。