Sass 环境调试

CSS的预编译工具有很多 :Less , Sass , stylus , postcss 等等 。CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。

为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，
可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

Sass 的简单了解

sass 是什么 ？

1. Sass (Syntactically Awesome StyleSheets) is the most mature, stable, and powerful professional grade CSS extension language in the world.(Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！)

2. Sass可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护

为什么使用 Sass ?

1. 完全兼容所有版本的CSS
2. 特性丰富
3. 成熟
4. 行业认可
5. 社区庞大
6. 拥有较多的框架

---

Sass 的环境配置

环境配置： 有两种安装方式，一个是使用应用程序，二是使用命令行，我们只说下windows下的命令行的演示。

安装

• 在windows安装，需要安装ruby环境。mac预装了ruby环境。

• 注意安装完成后一定要添加到path中，因为我们要使用ruby的gem命令来安装Sass :

  • gem install sass

  • 安装需要一段时间 , 当出现类似下面提示的时候，就安装好了 ：
    Successfully installed sass-3.4.22
    Parsing documentation for sass-3.4.22
    Done installing documentation for sass after 13 seconds
    1 gem installed

  • 这儿找到一篇详细的命令安装方式：
    http://www.w3cplus.com/sassguide/install.html
    更多阅读：
    http://jingyan.baidu.com/album/84b4f565eee59d60f7da324d.html

调试

1. 编译

   • sass文件有两种格式， 一种是 scss后缀的， 一种是sass后缀的。这个以后再来看。推荐使用的是scss格式的。

   • 在我们的项目中，我们编写 scss文件，通过命令来编译成css ,如下：
     格式为： sass 原scss文件:目标文件css
     示例为：sass hello.scss:hi.css

   • 这样就把scss文件编译成了css文件。

2. 编译时控制不同格式的输出

   • 有多种不同的格式：
     nested (嵌套 这个是默认的，看着不舒服) ；
     expanded (展开 看着最顺眼) ；
     compact (紧凑) ；
     comparessd(压缩 压缩成一行)

   • 我们通过下面的命令来选择输出不同的格式 ：
     sass hello.scss:hi.css --style expanded
sass hello.scss:hi.css --style compact
sass hello.scss:hi.css --style compressed

3. 或者可以使用nodejs环境来编译

   • 安装node-sass包 ：
     npm install -g node-sass

   • 检测包有没有安装好：
     node-sass -v

   • 编译文件
     node-sass hello.scss>hi.css

   • 这里控制下编译时候格式的输出
     node-sass hello.scss>hi.css --output-style expanded

   • 使用这条命令时候，我们编译的路径，不能有中文名，否则会报错，之后只要我们更改scss文件，保存后，就会自动修改编译后的css文件。

4. 自动编译

   我们想只要scss 文件已改动，那么对应的生成的css也会立即更新,我们需要对文件或者是项目进行监视。

   • 文件的监视 ，对当前文件
     sass --watch hello.scss:hi.css

   • 整个文件夹的监视
     sass --watch ./:./

   • 当然如果我们想要同时控制压缩格式，那么通过下面的形式 ：
     sass --watch hello.scss:hi.css --style expanded

   • 注意事项： 编译前要注意，路径中不能有中文，而且注释中也不要有中文。ruby环境sass编译中文出现Syntax error: Invalid GBKcharacter错误解决方法 :
     （1）如果用的是koala可视化编译工具，那么找到安装目录里面sass-3.3.7模块下面的engine.rb文件，例如下面路径：C:\Program Files (x86)\Koala\rubygems\gems\sass-3.3.7\lib\sass
     在这个文件里面engine.rb，添加一行代码 :
     Encoding.default_external = Encoding.find('utf-8')
     放在所有的require XXXX 之后即可。
     （2）如果是命令行工具也同样的解决方式：找到ruby的安装目录，里面也有sass模块，如这个路径 ：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
     在这个文件里面engine.rb，添加一行代码
     Encoding.default_external = Encoding.find('utf-8')
     放在所有的require XXXX 之后即可。

5. 也可以使用sublime 来自动编译

   • 在sublime 中 通过 ctrl+shift+p 输入 pcl ，查找下列插件
     Sass ， SASS build ， SASS Snippets ，SublimeOnSaveBuild(自动保存编译插件，保存后会自动编译)

6. 或者使用webstorm 来自动编译

   • 打开项目到webstrom ，找到scss文件，然后打开，一般都会提示 filewatcher is available ，我们add watcher ，然后按照默认，点击ok就可以了。
   • 在webstrom 里面如果编译后按照默认的nested形式来展现css的，如果我们 需要设置，那么我们在settings / Tools / File Watchers 来修改它。 前提是当前项目中存在 scss 或者sass后缀名的文件。 点击编辑图标后，找到 Watcher Settings ，在里面的Arguments 的最后添加一段内容 –style expanded

7. Sass 中的repl环境

   • 通过命令 sass -i 我们可以测试sass中的一些函数，和nodejs里的repl， 以及浏览器中的repl都类似。

---

扩展知识 :

sass中有两种格式 : 一种是 sass后缀的文件，一种是scss后缀的文件。我们推荐使用scss后缀的文件。

两者的区别和联系为：都使用严格的缩进方式，但是 sass 中没有花括号({}),没有分号(;) ， 而 scss 中有花括号和分号，使用起来方便。

简单举个例子区分：在以sass为后缀的文件中是这样的：

$border:1px
.box
    border:$border
    color:red

在以scss为后缀的文件中是这样的：

$border:1px;
.box{
    border:$border;
    color:red;
}

所以我们更推荐使用scss的文件格式。