一、首先搭建sass的开发环境

这里推荐node环境，node环境搭建好之后，用命令行工具安装sass。

cnpm install -g sass

image.png

二、转换sass或scss文件为css文件

注意下面的命令都加了--watch参数，这样可以修改sass或scss文件的同时实时查看生成的css文件。

• 1、转换sass文件为css文件

sass --watch sass.sass:sass.css

image.png

• 2、转换scss文件为css文件

sass --watch scss.scss:scss.css

image.png

• 3、转换比较

  
  image.png
  

  从上图可以看出转换后的结果是一致的。
  这里在写sass文件时注意不能用大括号和分号，在sass里面用换行代替分号，用缩进代表样式层次。而scss里面则跟写css文件时一致的。

三、基础知识

sass通俗点来讲就是俄罗斯套娃或占位符。

• 1、变量：
  如上面的$red-color和$blue-color，在sass里面变量前面一定要用$来标识，变量名可以用下划线_，也可以用中划线-来分割，不管用哪个，最后都会被转换成中划线。

  
  image.png
• 2、

四、在vue中配置sass

参考：https://blog.csdn.net/lily2016n/article/details/75309492

• 1、首先在项目下安装sass-loader和node-sass

npm install --save-dev sass-loader
npm install --save-dev node-sass // 因为sass-loader依赖于node-sass

• 2、在webpack中的loader配置项中添加

{
        test: /\.(css|sass|scss)$/,
        loaders: ['style', 'css', 'sass']
 }

image.png

• 3、在vue文件中通过lang的方式指定

<style lang="scss">
.left-side {
  width: 300px;
}

五、学习网站

sass中文网