1. 程式人生 > 實用技巧 >button 按鈕

button 按鈕

使用css變數來自由操作

    :root {
            --button-height: 32px;
            --font-size: 14px;
            --button-bg: white;
            --button-active-bg: #eee;
            --bordor-radius: 4px;
            --color: #333;
            --border-color: #999;
            --border-color-hover: #666;
        }
使用css變數來自由操作

    :root {
            --button-height: 32px;
            --font-size: 14px;
            --button-bg: white;
            --button-active-bg: #eee;
            --bordor-radius: 4px;
            --color: #333;
            --border-color: #999;
            --border-color-hover: #666;
        }
<style lang="scss">
    .g-button {
        font-size: var(--font-size);
        height: var(--button-height);
        padding: 0 1em;
        border-radius: var(--bordor-radius);
        border: 1px solid var(--border-color);
        background: var(--button-bg);

        &:hover {
            border-color: var(--border-color-hover);
        }

        &:active {
            background-color: var(--button-active-bg);
        }

        &:focus {
            outline: none;
        }
    }


</style>


No entres found 報錯

No entres found 報錯

./node_modules/.bin/parcel 
改成
./node_modules/.bin/parcel index.html

*******************************************

npx parcel 
改成
npx parcel index.html



再次執行的時候:

./node_modules/.bin/parcel index.html --no-cache (不用之前的快取)

或者

 rm -rf .cache(刪掉就可以了)