sass初学入门笔记（一）

我自己是个新手，一边学sass一边记下的笔记，可能有点罗嗦，可是复习起来的话仍是比较全面直观的。固然，最重要的仍是去实践，实践得真理

其它 CSS 预处理器语言：

CSS 预处理器技术已经很是的成熟，并且也涌现出了不少种不一样的 CSS 预处理器语言，好比说：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

在众多优秀的 CSS 预处理器语言中就属  Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。

 

Sass 是最先的 CSS 预处理语言，有比 LESS 更为强大的功能，Sass 虽然出现得最先，但远不如 LESS 普及。

 

其一开始的缩进式老版本语法，不能被大众接受，因为其强大的功能和 Ruby on Rails 的大力推进，仍是有不少开发者选择了 Sass。

 

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，最初它是为了配合 HAML（关于haml：http://www.bianceng.cn/web/Html/201411/46562_2.htm

一种缩进式 HTML 预编译器）而设计的，所以有着和 HTML 同样的缩进式风格。

 

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

1. 文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)
3. 而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似（SCSS 和 CSS 写法无差异）。简单点说，把你现有的“.css”文件直接修改为“.scss”便可使用。

 

“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（相似 CSS 语法格式）。

 

Sass 的编译有多种方法：

• 命令编译

        命令编译是指使用你电脑中的命令终端，经过输入 Sass 指令来编译 Sass。

• GUI工具编译

GUI 界面编译工具，目前较为流行的主要有：

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

相比之下，比较推荐使用如下两个：

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

• 自动化编译

         Grunt 和  Gulp ，能够经过他们来配置 Sass 的编译【Grunt-beginner前端自动化工具学习：http://www.imooc.com/learn/30】

常见的编译错误：

最为常见的一个错误就是字符编译引发的。在Sass的编译的过程当中，是 不支持“GBK”编码的。因此在建立 Sass 文件时，就须要将文件编码设置为“utf-8”。

另一个错误就是路径中的中文字符引发的。建议在项目中文件命名或者文件目录命名不要使用中文字符。

注意：全文用的是scss写法

不一样样式风格的输出方法：

在 Sass 中编译出来的样式风格也能够按不一样的样式风格显示。其主要包括如下几种样式风格：

代码例子：

• 嵌套输出方式 nested

           

 

• 展开输出方式 expanded  

           

                

• 紧凑输出方式 compact 

           

        

• 压缩输出方式 compressed

           

 

Sass 调试

浏览器支持“sourcemap”功能便可。早一点的版本，须要在编译的时候添加“--sourcemap”  参数：

sass --watch --scss --sourcemap style.scss:style.css

 

在 Sass3.3 版本之上（测试使用的版本是 3.4.7），不须要添加这个参数也能够：

sass --watch style.scss:style.css

 

SASS没法兼容已有的CSS代码：sass编译成css以后，没法反编译成sass了。就好比生出来塞不回去的意思