遨翔在知識的海洋裡----(css之vue中sass基本用法)

npm

cnpm install sass sass-loader node-sass --save-dev //開發環境就可以了
複製程式碼

sass scss區別

scss

ul {
    li {
        a {
            color: $body-color;
        }
    }
}
複製程式碼

sass

ul
    li
        a
            color: red
複製程式碼

style

scss

<style lang="scss">

</style>
複製程式碼

sass

<style lang="sass">

</style>
複製程式碼

變數

#### 外面宣告
$body-color: #00aaee;  
p{
    color: $body-color;
}

#### 內部宣告
nav {
    $width: 100px;
    width: $width;
    color: $body-color;
    border: 1px solid #ccc;
}
複製程式碼

巢狀

ul {
    li {
        a {
            color: $body-color;
        }
    }
}
複製程式碼

選擇器

.article {
    //後續兄弟
    ~ article {
        border-top: 1px solid #ccc;
    }
    //子級
    > section {
        background: #eee;
    }
    //當前元素的下一個兄弟
    + section {
        background: #eee;
    }
    //父級偽類
    &:hover {
        background-color: red;
    }
}
複製程式碼

繼承

.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}
複製程式碼

等同於

.seriousError {
    border: 1px solid red;
    background-color: #fdd;;
    border-width: 3px;
}
複製程式碼