add a limited size box pretty shadow, and auto show/hide when scrolling

scroll-shadow.scss

/*
 source: http://unlimited.kptaipei.tw/docs/
 ref: http://lea.verou.me/2012/04/background-attachment-local/

 demo by @Lea Verou
 http://dabblet.com/gist/2462915
 */
%scroll-shadow--vertical {
    background-image:
        /* Shadow covers */
        linear-gradient($white 30%, rgba($white, 0)),
        linear-gradient(rgba($white, 0), $white 70%),

        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba($black, .15), rgba($black, 0)),
        radial-gradient(farthest-side at 50% 100%, rgba($black, .15), rgba($black, 0));
    background-repeat: no-repeat;
    background-color: $white;

    /* set size in mixin
    background-size */

    /* Opera doesn't support this in the shorthand */
    background-attachment:
        local,
        local,
        scroll,
        scroll;

    background-position:
        50%   0%,
        50% 100%,
        50%   0%,
        50% 100%;
}

@mixin scroll-shadow--vertical($scroll-shadow-bgc: $white, $scroll-shadow-color: $black, $scroll-shadow-size: 10px) {

    @if ($scroll-shadow-bgc == $white) and ($scroll-shadow-color == $black) {
        @extend %scroll-shadow--vertical;
    } @else {
        background-image:
            /* Shadow covers */
            linear-gradient($scroll-shadow-bgc 30%, rgba($scroll-shadow-bgc, 0)),
            linear-gradient(rgba($scroll-shadow-bgc, 0), $scroll-shadow-bgc 70%),

            /* Shadows */
            radial-gradient(farthest-side at 50% 0, rgba($scroll-shadow-color, .15), rgba($scroll-shadow-color, 0)),
            radial-gradient(farthest-side at 50% 100%, rgba($scroll-shadow-color, .15), rgba($scroll-shadow-color, 0));
        background-color: $scroll-shadow-bgc;
    }

    background-size:
        100% rem-calc($scroll-shadow-size)*3,
        100% rem-calc($scroll-shadow-size)*3,
        100% rem-calc($scroll-shadow-size),
        100% rem-calc($scroll-shadow-size);
}

加上 %placeholder 來減少 css 輸出結果

need some variables:

• $white
• $black
• rem-calc() function

use it in scss

.box {
  // default style
  @include scroll-shadow--vertical;

  // 白底，黑陰影，5px 大小
  @include scroll-shadow--vertical(#fff, #000, 5px);

  // 預設顏色，僅特別設定 20px 大小
  @include scroll-shadow--vertical($scroll-shadow-size: 20px);
}