sublime添加sass编译
首先安装Ruby环境
sass是基于ruby的产物,因此在安装sass前需要先安装ruby,如果用命令方式编译Sass也是必须安装ruby的。命令行编译sass见!
下载Ruby windows 安装包: http://rubyinstaller.org/downloads/

根据你的系统下载相应的版本!
下载好后直接运行rubyinstaller-2.3.0-x64.exe 这个文件,Add Ruby executables to your PATH添加环境变量的选项必须选择上,否则后面还需自己手动添加。

安装完成后打开cmd命令提示符输入ruby -v,如果出现版本号信息,说明安装成功了。

======================================================================================
安装Sass方式:
- 通过命令安装 Sass
- 通过 Compass 来安装 Sass
- 本地安装 Sass
- 淘宝 RubyGems 镜像安装 Sass
这里介绍下通过命令安装Sass,在开始菜单启动Start Command Prompt with Ruby,然后输入:
gem install sass
如果出现被墙的情况,可以使用代理或者考虑上面的其他安装方式进行。

安装完Sass之后,就可以通过sass命令来进行编译了,但这又回到了命令编译方式。
=================================================================================
sublime text 3安装sass和Sass 和 SASS Build插件
利用package control工具可以直接安装这两款插件。
Ctrl+shift+p ----->install package------->sass、sass build


安装好这两款插件后,查看Tools->Build System可以发了有了SASS和SASS - Compressed两种编译模式。

Sass编译出来的样式风格有4种:
嵌套输出方式 nested 它是默认值
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed 生产环境当中一般使用这个
sublime-执行编译
首先得新建一个scss文件,比如test.scss(编码必须是UTF-8),并写点Sass代码,保存之后,按下快捷键Ctrl+B

如果表示编译成功,并自动生成了test.css和test.css.map两个文件,然后就可以在html种引用这个css文件了。注意在编译的时候test.scss文件模式必须设置为Sass,在sublime工具的右下角可以看到。(或者 选择 工具---->编译系统--->sass)
通过sublime来编译Sass可以实时进行,所以就没有了watch等一些监听源文件的功能。
以上就是全部步骤。
sublime添加sass编译的更多相关文章
- sass的入门(安装以及sublime中如何编译sass)
很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Sublime Text 3(中文)添加Lua编译环境
Sublime Text 3(中文)添加Lua编译环境 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 没有 ...
- 在sublime text3中安装sass编译scss文件
一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)
原文请看:http://www.cnblogs.com/imwtr/p/6010550.html 用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...
- sass编译
sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...
- sublime搭建Java编译平台及编码问题
Sublime自带Java编译功能,当时只能编译不能运行,我们做一下小小的修改就可以让sublime一步完成编译运行的功能,实现sublime搭建Java编译平台. 使用Ctrl + B 编译时,所编 ...
- ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...
- 怎么使用Less/Sass编译工具koala
怎么使用Less/Sass编译工具koala 如何使用Less/Sass编译工具koala 一.SASS调试插件的方法 如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包 ...
随机推荐
- Error:Cannot find module 'stylus'
在webpack 里面用了 stylus-loader,但npm instatll 没有正确安装,出现error: Cannot find module ‘stylus’. 解决办法: 重新npm i ...
- C# 利用ICSharpCode.SharpZipLib.dll 实现压缩和解压缩文件
我们 开发时经常会遇到需要压缩文件的需求,利用C#的开源组件ICSharpCode.SharpZipLib, 就可以很容易的实现压缩和解压缩功能. 压缩文件: /// <summary> ...
- IIC知识
任何一个微处理器都要与一定数量的部件和外围设备连接,但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接,那么连线将会错综复杂,甚至难以实现.为了简化硬件电路设计.简化系统结构,常用一组线路 ...
- [Oracle] Lock&Latch梳理
Oracle lock&latch 1. 概述 4种锁机制 lock latch pin mutex 保证资源在并发访问和修改时不被破坏 锁类型 行为 持有时间 级别 保护类型 lock 队列 ...
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- C#根据反射和特性实现ORM映射实例分析
本文实例讲述了C#根据反射和特性实现ORM 映射的方法.分享给大家供大家参考.具体如下: (一)关于反射 什么是反射? 反射就是在运行时,动态获取对象信息的方法.比如:运行时获得对象有哪些属性,方法, ...
- iptables介绍iptables和netfilter
随着互联网技术的方兴未艾,各种网络应用层出不穷,网络攻击.黑客入侵也成了网民畅游互联网的心头大患,互联网安全也愈加受到了人们的重视.网络防火墙,作为一种简单高效的互联网防御手段,逐渐成为了网民畅游网络 ...
- (5)ASP.NET HttpResponse 类
HttpResponse 类用来封装来自 ASP.NET 操作的 HTTP 响应信息 https://msdn.microsoft.com/zh-cn/library/system.web.httpr ...
- Codeforces Round #450 (Div. 2) A. Find Extra One【模拟/判断是否能去掉一个点保证剩下的点在Y轴同侧】
A. Find Extra One time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 洛谷——P1227 [JSOI2008]完美的对称
P1227 [JSOI2008]完美的对称 题目描述 在峰会期间,必须使用许多保镖保卫参加会议的各国代表.代表们除了由他自己的随身保镖保护外,组委会还指派了一些其他的特工和阻击手保护他们.为了使他们的 ...