.skeleton {

    /* 骨架動畫 */
    @skeleton-style: {
        background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
    }

    /* 單行，通常用於標題這種單行塊元素 */
    &-block:empty::before {
        display: inline
 
-block;
        width: 100%;
        content: 'skeleton';
        text-indent: -999em;
        @skeleton-style();
    }

    /* 內斂，通常用於額外的小資訊 */
    &-inline:empty::before {
        display: inline-block;
        content: 'skeleton';
        text-indent: -999em;
        width: 50%;
        @skeleton-style();
    }

    
 
/* 多行，通常用於正文 */
    &-multi:empty {

        &::before {
            display: inline-block;
            width: 100%;
            content: 'skeleton';
            text-indent: -999em;
            margin-bottom: 0.2em;
            @skeleton-style();
        }

        &::after {
            display: inline
 
-block;
            content: 'skeleton';
            text-indent: -999em;
            width: 50%;
            @skeleton-style();
        }

    }

    /* 動畫 */
    @keyframes skeleton-loading {
        0% {
            background-position: 100% 50%;
        }

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

}