SASS入门笔记及如何在vue项目中使用SASS

一、SASS的安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby直接下载安装就好了
安装完ruby之后查看版本，检查是否安装成功

//查看ruby版本号
ruby -v
//安装sass
gem install sass
//安装compass
gem install compass
//安装成功后查看版本号
sass -v
compass -v

这样SASS就安装成功了
具体可参照SASS中文网

二、在vue项目中使用SASS

1、首先在vue项目中安装依赖（在创建项目时没有安装node-sass的情况）

npm install node-sass sass-loader --save-dev

2、在vue项目中使用scss
使用方式可大致分为三种：

a、全局引入方式（即一次配置，在整个vue项目中都可以使用，试用于全局样式）
有的说需要安装sass-resources-loader（我的是cli3项目，不用安装就可以，如果你的项目是cli2的，可以试试安装一下，相应的配置自己百度一下就好了）

//安装sass-resources-loader
npm install sass-resources-loader --save-dev

cli3的配置：（其实就是默认帮你在每一个vue文件的style里面都加上@import "@/assets/scss/_style.scss"这个引入，不用自己手动一个个的去加，这适用于全局样式）

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
            // 因为 `scss` 语法在内部也是由 sass-loader 处理的
            // 但是在配置 `data` 选项的时候
            // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
            // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
            scss: {
                prependData: `@import "@/assets/scss/_style.scss";`
            },

        }
    }
}

cli3的配置可参照Vue CLI文档

---

b、单独引入方式（哪个vue文件要使用，就在那个vue文件中引入）

<style scoped lang="scss">
@import "@/assets/scss/_style.scss";//你项目中要用到的SCSS的路径，@表示cli3项目下src
p{ color: $color; width: 70%; margin: auto; font-size: $font-size;}
</style>

---

c、直接在相应的vue文件里面用SCSS

<style scoped lang="scss">
$color:red;
$font-size:20px;
p{ color: $color; width: 70%; margin: auto; font-size: $font-size;}
</style>

具体的一些SCSS的语法，以及具体的使用，可以看SASS的中文文档