一,什么是sass,有什么用
sass准确来说是一套很方便你来管理你css的框架,sass自己本身并不是css,但是有着一套跟css风格类似的规范,却又非常适合开发使用。具体方便的地方可以搜索sass的教程就能明白了。
但他终归不是css,也就是说不能被浏览器识别,那么想要在浏览器看到效果,还必须把你的sass文件转成css文件。
二,怎么把sass文件转成css文件
sass框架在提出来的时候,肯定会同步考虑到提出这个转化的工具,其实名字就叫做sass build。可以单独安装,也可以继承咋IDE里。
我这里主要就sublime来集成sass build讲解。
准备工作
1,安装sublime
2,安装sublime的package control plugin
上面2步不属于sass范畴的,属于sublime工具使用的范畴,一般用sublime开发的同学应该都有这个环境,没有的同学可以参考:http://blog.csdn.net/aa841538513/article/details/72547605
3,通过package control plugin安装:sass和sass build
4,重启sublime。这个很重要啊,我在这里被坑了半个多小时。
然后,你就可以开始愉快的进行sass开发了
这里假设你写了一个文件style.scss,打开这个文件,然后 control + B ,就会在默认的目录生成对应的style.css文件和style.css.map文件
5,指定生成的css文件存放目录(可选。一般优秀的程序员都会这么做的)
因为系统会默认指定在scss文件同目录下,这样一个style.scss旁边就会有style.css和style.css.map文件,一旦scss文件多了,这些文件就先得很冗余,因为.css和.css.map文件一般都是不需要特别关注的,而scss文件确实我们一直在修改的文件。
所以,优秀的程序员都会很好的管理分类这些文件,指定.css和.css.map的生成路径。
操作步骤:
1)Tools->build system -> new build system ... 会生成一个文件,把下面的内容复制到文件中覆盖里面的内容
- {
- "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css","--stop-on-error","--no-cache","--style","compressed"],
- "selector": "source.sass, source.scss",
- "line_regex": "Line ([0-9]+):",
- "osx":
- {
- "path": "/usr/local/bin:$PATH"
- },
- "windows":
- {
- "shell": "true"
- }
- }
2)然后ctrl+s保存到SubLime ->Packages _>MySass 文件夹中,并把文件命名为MySass。 没有文件夹的就新建一个文件夹。
3)回到sublime,点击tools->Build system -> MySass。
4)然后打开你想要编译的.scss文件,ctrl+B. 如果在对应的css文件夹生成了对应的.css和.css.map文件,那就成功了。