sass 系列之 - sass配置与编译

sass-sass的配置

1. sass的安装

sass是基于Ruby语言开发而成的，所以要先安装Ruby。Ruby官网：Ruby下载
根据官网的要求与电脑的配置下载适合你的版本。
在安装过程中。当到了下图步骤，记得勾选 Add Ruby executables to you PATH，将Ruby添加到电脑的配置文件中

验证安装，环境变量的配置是否成功，在命令行下（CMD）输入以下口令（图为成功效果）

由于Ruby的默认gem源位于国外，使用国内网络环境容易导致gem源间歇性中断，所以我们要将默认gem源更换为国内源
（这里我采用的是https://gems.ruby-china.org/ 还有一个淘宝gem源，不过我在安装过程中出现证书验证错误，据说的服务停止了）

/*1.删除gem源*/
gem sources --move https://rubygems.org/
//2.添加国内gem源
gem sources --add https://gems.ruby-china.org/
//3.检查是否替换成功
gem sources -l

如果替换成功，会如下显示：

在命令行中使用gem指令安装sass 和compass。

gem install sass
gem install compass

好了。以上步骤完成之后，sass的环境就安装好了。

2.sass的编译

sass的编译有很多种方式，如命令行编译模式，sublime插件SASS-Build、编译软件koalad等等进行编译：

命令行编译

在一个空目录下创建一个demo.scss文件随意书写一些scss代码，然后在这个目录下，导出cmd命令窗口，然后输入如下命令

然后在该目录下就会自动生成如下文件（demo.css即为编译好的css文件）

以上方式每更改一次scss文件内容，都要重新编译一次，所以，sass提供了一个监听功能

//通过监视scss文件，如若scss内容改变，那么会自动开始编译
sass --watch demo.scss:demo.css
//在命令行下关闭监听   Ctrl+C
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录(需要两个目录，一个目录（sass）放置scss文件，一个（stylesheets）放置对应的css文件)
sass --watch sass:stylesheets

如果监听失败，出现CompatibilityError，则请确认你的目录路径是否存在中文字符，请改成英文。让sass识别中文路径也可以在Ruby中设置。具体的设置方式请自行百度。

命令行编译配置选项命令行编译sass的配置选项，如编译过后css排版，生成调试map，开启debug信息等，可以通过sass-v查看详细，常用的有两种配置选项，–style –sourcemap

// 编译格式
sass --watch input.scss:output.css --style compact  
//编译添加调试map
sass --watch input.scss:output.css --sourcemap  
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap  
//开启debug信息
sass --watch input.scss:output.css --debug-info

–style 表示解析之后的css的排版格式，sass内置的css排版格式有四种
nested expended（正常开发格式） compact compressed(压缩格式)

软件方式编译 - koala

koala是一个前端预处理语言图形编译工具，支持Less,Sass,Compass,CoffeeScript.帮助web开发者更高效地使用它们进行开发，并且他可以跨平台运行，完美兼容Windows，Linux，Mac。下载地址：koala下载

（第一次写博客，内容出现啥问题请在评论区不吝赐教，有啥不懂的也可以提问，尽我所能解答。）