遨翔在知识的海洋里----(css之vue中sass基本用法)-优快云博客

本文详细介绍了Sass与SCSS的区别与联系，包括语法特点、变量使用、嵌套规则、选择器应用、继承机制等内容，并通过具体示例展示了如何在实际项目中运用这两种样式表语言。

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;
}
复制代码