scss的使用

作为一个前端职场小白，今天我用了一天的时间学习sass，下面只是我记录使用sass的步骤。方便我用到的时候回来看一眼。。毕竟我现在还没有它的用武之处。。。

一、sass官网:【https://www.sass.hk/】

二、安装sass

（1）windows环境下的安装：ruby：【 https://rubyinstaller.org/downloads/】（默认安装）

【坑：】安装后cmd说ruby不是内部命令

【解决方法:】

①找到安装目录下的bin文件路径（默认安装的话一般来说在c盘）【C:\Ruby25-x64\bin】

②找到 系统 的 环境变量 里的path：把该路径【（例）C:\Ruby25-x64\bin】加进去。

③解决了，可以去cmd验证一下（ruby -v）

（2）命令行安装sass

cmd：gem install sass;

三、使用sass

【题要】scss.css文件转换成test.css文件，在index.html中引入的是test.css文件。并且更改sccs.css时test.css可以

实时更改其样式，index在页面显示也就能实时变化。

（1）新建一个文件。目录结构如下

（2）

①在cmd里面输入编译命令 【进入到项目的css目录下】:  sass  scss.scss  test.css

好了之后，在css文件下多出一个test.css文件。

②实时监控scss.scss变动，test.css也能实时改变。

只是要输入指令【进入该项目的css目录下】:sass --watch scss.scss:test.css

③完成了。剩下的scss的编写语法什么的了。。。这个时候就相当于你在scss.scss里面编写css代码就可以了，其他的什么步骤都一样，简而言之就是简化编写css代码还有一些计算什么的。。不用自己去慢慢算，直接写个指令函数就可以了。。。

四 scss的简单语法

【推荐：阮一峰老师的一篇文章】:http://www.ruanyifeng.com/blog/2012/06/sass.html【这个简单明了，但是还是建议看一遍官网，很快就看完了】。。。

 

五： vue中使用sass

(1)npm安装:

 npm install node-sass --save-dev

 npm install sass-loader --save-dev

 npm install style-loader --save-dev

 

【我遇到的坑】安装node-sass安装有错误：解决方法:https://blog.csdn.net/ty_0930/article/details/70184392

  运行命令: npm install -g node-gyp 

(2)进入到项目里的bulid下的webpack.base.config.js下的module下的rules中加上下面那一段配置就

{

    test:/\.scss$/,

     loaders:["style","css","sass"]

}

(3)现在就可以在项目中使用scss了

<style scoped=""  lang="scss"  type="text/css">

     ……

</style>