详解sass的基础知识

Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，Sass 虽然出现得最早，但远不如 LESS普及。以下是我学习sass 的一些笔记。希望对大家有用。

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了。就比如生出来塞不回去的意思

  Sass 和 SCSS 有什么区别？

  Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  • 1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  • 2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的CSS 语法书写方式非常类似。
    
  
  
  
  文章来自：博客园/老嫩草