sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹
sass基于ruby引擎,所以安装时ass、compass之前需要安装ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载并安装相应的版本,勾选第二项(要在cmd中使用ruby)。

打开命令行,输入ruby -v,查看我们安装的ruby版本信息。

ruby安装完成之后,打开ruby的command面板,接下来就是安装sass了。Windows下安装sass有多种方法,这里说一下其中的两种:
1、到 Rubygems(http://rubygems.org/) 下载 Sass 的安装包(http://rubygems.org/gems/sass),然后在cmd输入:
gem install <把下载的安装包拖到这里>
回车!
2、打开cmd,输入 gem install sass --version=3.4.22(可选版本),回车。(卸载方法: gem uninstall sass --version=3.4.22)。
接下来开始在sublime中安装sass插件
打开sublime,ctrl+shift+p,输入install,选择第一个(Package Control)回车


命令框中输入Sass,选择,回车!(同样的步骤,命令框中输入SassBuild,选择,回车!)。
Ctrl+shift+p,输入list packages,回车,可以看到插件列表,如果其中有Sass和SassBuild,说明安装成功了。、

写完scss文件后,Ctrl+b就可以编译了,但默认编译后的css文件和scss文件放在同一个文件夹,写项目的时候可能会有很多css文件,有固定的css文件夹,这时候就需要把编译后的css文件,放到这个指定的文件夹了,手动移动的话,有点麻烦,那就跟着下面的步骤设置一下吧。
1、Tools -> Build System -> New Build System
2、粘贴如下代码:
{
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
保存到Sublime Text3 Packages下,新建MySass文件夹,保存文件名MySass.sublime。
3、Tools -> Build System -> MySass ,选择编译类型。
这样设置以后,如项目中有css文件夹,就会编译到css文件夹中,如果没有,会自动生成一个css文件夹,用于保存编译后的css文件。
然后Ctrl+b,尽情编译吧!
sublimeText3 中配置sass环境,并将编译后文件保存到指定文件夹的更多相关文章
- 在webstorm中配置sass环境
最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等. LESS的实时编译很简单,在node平台安装一 ...
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...
- 4.8 Sublime Text3 中配置 Python环境 --之下Sublime配置Python环境
返回总目录 目录: 1.没有配置之前 2.安装Package Control插件 3.安装其他库: 4.配置其他操作: (一)没有配置之前: 我们试着运行以下,会效果怎么样? 1.首先选择Python ...
- Ubuntu中配置Java环境变量时,出现command not found问题解决记录
百度出Ubuntu中配置Java环境变量时,在利用sudo gedit /etc/profile 对profile编辑后, 在terminal中输入 sudo source /etc/profile, ...
- 在PHPstorm编辑器中配置git环境
在phpstorm编辑器中配置git环境,使得编程人员从git仓库中提交代码,克隆代码,,,更佳便利快捷,有利于提高项目的质量和效率 工具/原料 phpstorm编辑器,git客户端 win7或w ...
- eclipse中配置spring环境
初识Spring框架 1.简单使用 eclipse中配置Spring环境,如果是初学的话,只需要在eclipse中引入几个jar包就可以用了, 在普通java project项目目录下,建一个lib文 ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- (原创)超详细一步一步在eclipse中配置Struts2环境,无基础也能看懂
(原创)超详细一步一步在eclipse中配置Struts2环境,无基础也能看懂 1. 在官网https://struts.apache.org下载Struts2,建议下载2.3系列版本.从图中可以看出 ...
- 4.7 Sublime Text3 中配置 Python环境 --之上安装Sublime 3
返回总目录 目录: 1.展示效果: 2.缺优分析: 3.下载Sublime Text3 (一)展示效果: 1.能够交互式编写Python代码: 2.可以编写文件式Python代码: 3.能够自动补齐代 ...
随机推荐
- mysql 服务启动失败
mysql 数据库连接失败 1.用naviCat Preiumn 连接本地的mysql 失败,查找原因,mysql 数据库服务没有启用,但是在服务列表里面没有找到对应的mysql 服务. 所以在cmd ...
- DIY福音:Firefox菜单及右键菜单ID大全
每一个折腾Firefox的Diyer都是上辈子折翼的天使,致自己! 打磨Firefox界面的时候最多的就隐藏一些平常根本用不上的一些菜单,常规的做法就是安装DOM Inspector扩展右键查找大法寻 ...
- 使用Angular CLI生成路由
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
- Python3 多线程编程(thread、threading模块)
threading是对thread的封装. 1.开启线程: t=threading.Thread(target=sayhi,args=('hh',)) t.start() 或者先建一个Thread的继 ...
- SIMD---SSE系列及效率对比
SSE(即Streaming SIMD Extension),是对由MMX指令集引进的SIMD模型的扩展.我们知道MMX有两个明显的缺点: 只能操作整数. 不能与浮点数同时运行(MMX使用FPU寄存器 ...
- pycharm创建Flask项目,jinja自动补全,flask智能提示
pycharm创建Flask项目,jinja自动补全,flask智能提示 之前一直都是用在idea里创建空项目然后导入,之后就没有各种的智能提示,在选择文类,选择模板之类的地方就会很麻烦. 步骤1:用 ...
- Algorithm --> 6174问题
6174问题 假设一个各位数字不相同的四位数,把所有数字从大到小排序后得到a, 从小到大排序后得到b,然后用a-b替换原来这个数,继续操作.例如,从1234出发,依次有4321-1234=3078,8 ...
- Jmeter中正则表达式提取器使用详解
在使用Jmeter过程中,会经常使用到正则表达式提取器提取器,虽然并不直接涉及到请求的测试,但是对于数据的传递起着很大的作用,本篇博文就是主要讲解关于正则表达式及其在Jmeter的Sampler中的调 ...
- 走进webpack(2)--第三方框架(类库)的引入及抽离
在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...
- C#编程语言之委托与事件(二)—— C#事件
前面已经大致讲述了C#委托的一些基础知识点,本文接下来的内容是C#中的事件(Event),在此我提个建议,如果是刚接触C#的委托类型的朋友可以先看到这里,等熟悉了委托的使用之后(大约1-2天)再来了解 ...