笔记：关于SCSS的使用方法



刚接触scss的时候是有点懵逼的，对于scss的语法规则这个是没啥问题的，跟普通的css没啥区别，但就是不知道该如何使用，网页里直接使用.scss之类的方法是也试过了，没用。

后来，经过领导的点拨才突然明白过来了，完全是自己把这玩意想得太复杂了······


其实网页标签引入的还是css文件，只不过这个css文件是经过scss编译而来。


安装scss
具体方法流程可以打开sass网站安装流程查看。
咱这就简单的说一下。
1.首先要使用scss是需要安装Ruby 安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

安装失败或者网络故障之类的可以参考Sass网站说明。
2.Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

OK，这些前置配置都做完成了的话，就可以开始进行Scss的代码编写了。

使用scss
sass的编译方式有多种方式，咱也不搞那么多花里胡哨的，就直接使用最简单的命令行编译方式。
首先打开cmd
然后cmd的路径切换到项目存放css文件的路径。

最后就是输入sass的命令了

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch 文件夹目录名称

我这边比较嫌麻烦，都是直接监听文件的目录，这样只要是这个文件夹内的任何scss文件有变动都会同时进行编译。

比如：我在监听的目录内创建一个scss文件的同时会自动生成同名称的.map以及.css的两个文件，.css就是项目需要引入的样式表文件。

开发过程中，此编译命令窗口不能关闭，不然就会停止编译。
当然，关闭了也没事，下次开启编译后，系统会监测当前scss文件与css文件，如果有差异，会自动编译新的css代码的。

恩。大致上就这些了，其他具体的可以进入sass的网站进行查看，scss的变量之类的用法，就需要各位自己去百度百度了，这里就不多说了。