sublime text 3 配置sass环境
2017-07-16 14:56
295 查看
一,什么是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 ... 会生成一个文件,把下面的内容复制到文件中覆盖里面的内容
2)然后ctrl+s保存到SubLime ->Packages _>MySass 文件夹中,并把文件命名为MySass。 没有文件夹的就新建一个文件夹。
3)回到sublime,点击tools->Build system -> MySass。
4)然后打开你想要编译的.scss文件,ctrl+B. 如果在对应的css文件夹生成了对应的.css和.css.map文件,那就成功了。
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文件,那就成功了。
相关文章推荐
- sublime Text3下sass环境配置(windows)
- sublime text 3 配置sass环境
- Mac 上Sublime Text 2配置lua环境
- Sublime Text 2 配置PHP调试环境(在windows环境下)
- Mac OS X系统搭建谷歌Go语言开发工具 Sublime Text 2环境配置
- sublime text 3 快捷键大全以及配置编译环境
- sublime text 3 环境变量的配置、安装Package Control、汉化和注册
- 在Sublime Text 3中配置Python3的开发环境/Build System
- sublime text 3搭建/配置C++编译环境
- SASS环境搭建及HBuilder中sass预编译配置
- Golang (Go语言) Mac OS X下环境搭建 环境变量配置 开发工具配置 Sublime Text 2 【转】
- sublime text 3配置git环境
- 配置sublime text的 JavaScript编写环境
- 配置mac版sublime text lua编译环境
- sublime text 3 快捷键大全以及配置编译环境
- Sublime Text 3 配置C++环境,以后写一些小算法小程序就方便多了
- Sublime Text 3中文乱码并配置Java编译环境
- Ubuntu配置sublime text 3的c编译环境
- sublime text3 配置node环境在path中找不到node的解决
- Sublime Text3 汉化及配置C++编译环境