sass安装及连接css文件笔记

                       **Sass安装与使用**

一、安装ruby
点击【rubyinstaller-2.1.9-x64】按照提示安装即可；
二、环境变量
在【开始】中搜索cmd并打开命令窗口，输入gem -v 如果提示错误，找到刚开安装ruby21-x64的文件夹，打开bin文件夹，复制文件路径，粘贴到计算机环境变量的path中，将gem设置为全局变量，即可在电脑的任何部位执行此命令。
三、安装sass
1、把【sass安装包及来源远程服务器的配置】文件夹中的所有【文件】放在自己配置的服务器上，如：d:/phpStudy/www

2、打开服务器，在命令窗口执行以下命令，改变sass的服务器来源：
gem sources --remove https://rubygems.org/
gem sources -a http://localhost

3、安装sass
gem install sass

4、当显示如下时，则表示安装sass成功：

四、如何使用sass来编写css文件
1、在E盘下新建一个sassdemo 的文件夹
2、在sassdemo中新建一个css的文件夹，以放置之后创建的css文件；
3、在sassdemo文件夹下创建demo01.scss
@charset “utf-8” //设置中文可识
body{
Background:red;
}
5、在cmd命令窗口执行以下代码，让编写的scss代码关联到css文件夹中：
①转到E盘下 命令：e: 回车
②转到sassdemo下 命令：cd sassdemo 回车
③查看sassdemo下的文件 命令：dir 回车
④将sass代码关联到css下 命令：sass demo01.scss:css/demo01.css 回车（注意这里的demo01.scss和demo01.css的basename是可以改变的）
显示如下则表示成功：

⑤执行成功后会在css文件夹下显示.css文件
如下：

⑥实时监听命令 命令：sass --watch .:css [. 表示当前目录]
sass --watch 要监听的目录：编译后的css文件位置

成功显示如下：

至此；一切就绪，可以在scss中执行你的css样式了！