Sass学习笔记--Sass的编译

命令行编译

• 单个sass文件编译

  sass  <要编译的Sass文件路径> : <要输出CSS文件路径>

• 多文件编译（整个项目目录文件下所有的sass/scss同时操作）

  sass sass/:css/

  上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

• 开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来

  sass --watch  <要编译的Sass文件路径> :   <要输出CSS文件路径> 

GUI 界面工具编译 

• 推荐使用 Koala
  
  • 下载地址(http://koala-app.com/)
  • 一般教程(http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html）

IDE自助编译

　　webstorm设置

1. 点击左上角的File→Settings→File Watchers
2. 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
3. arguments(配置编译后的文件的输出路径)

   --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

4. Output paths to refresh

   $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

1. 

常见的编译错误

• 在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”
• 在项目中文件命名或者文件目录命名不要使用中文字符
• 其他人为失误造成的编译失败，在编译过程中都会有具体的说明，可以根据编译器提供的错误信息进行对应的修改。

四种编译后css样式

• 嵌套输出方式 nested、展开输出方式 expanded 、紧凑输出方式 compact 、压缩输出方式 compressed

• 编译出来的CSS样式风格的选择完全是个人喜好问题，可以根据自己喜欢的风格选择参数。
• 一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。

这里有一段scss

 

 

嵌套输出方式 （nested）

sass --watch test.scss:test.css --style nested

css

 

---

 

展开输出方式 ( expanded )

sass --watch test.scss:test.css --style expanded

css

(编译结果css文件与第一种基本相同，只不过结束的大括号需要独占一行)

 

 

---

 

紧凑输出方式 compact 

sass --watch test.scss:test.css --style compact

css

艾玛，令强迫症患者不安的单行样式出现了

---

 　

压缩输出方式 compressed

sass --watch test.scss:test.css --style compressed

css

输的的css 代码被压缩为单行写法，随着我们以后工作中大量使用Sass直接写样式，css代码输出一般为单行压缩式。