首先安装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编译的更多相关文章

  1. sass的入门(安装以及sublime中如何编译sass)

    很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...

  2. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  3. Sublime Text 3(中文)添加Lua编译环境

    Sublime Text 3(中文)添加Lua编译环境 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 没有 ...

  4. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探(转载自imwtr)

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  6. sass编译

    sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...

  7. sublime搭建Java编译平台及编码问题

    Sublime自带Java编译功能,当时只能编译不能运行,我们做一下小小的修改就可以让sublime一步完成编译运行的功能,实现sublime搭建Java编译平台. 使用Ctrl + B 编译时,所编 ...

  8. ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

    sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...

  9. 怎么使用Less/Sass编译工具koala

    怎么使用Less/Sass编译工具koala 如何使用Less/Sass编译工具koala 一.SASS调试插件的方法 如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包 ...

随机推荐

  1. vue中scoped vs css modules

    注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css module ...

  2. aplusb 数论

    题目描述 SillyHook 要给小朋友出题了,他想,对于初学者,第一题肯定是a+b啊, 但当他出完数据后神奇地发现.in 不见了,只留下了一些.out,他想还原.in,但 情况实在太多了,于是他想要 ...

  3. linux删除大量文件

    1.建立一个空目录 mkdir -p /tmp/rsync_blank 2.确立需要清空的目标目录 /data/web/vip/htdocs/tuan 3.使用rsync同步删除(注意目录后面的“/” ...

  4. app自动测试-微信(iOS)-web-1

    appium 是一个用于app自动测试的工具.目前支持测试iOS, Android, Windows上的app.(github: https://github.com/appium/appium) 其 ...

  5. #ifndef 的用法介绍

    ifndef是 if not define 的缩写,一种宏定义.它是预处理功能中三种(宏定义,文件包含和条件编译)中的第三种--条件编译. 其使用方式是: #define X ... #endif / ...

  6. js setInterval 启用&停止

    以下面例子为说明: <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type= ...

  7. jQuery性能优化【转】

    原文发布时间为:2010-10-22 -- 来源于本人的百度文章 [由搬家工具导入] 之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分- ...

  8. quartz的配置

    Quartz.Net中的概念:计划者(IScheduler).工作(IJob).触发器(Trigger).给计划者一个工作,让他在Trigger(什么条件下做这件事)触发的条件下执行这个工作 将要定时 ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---14

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. 关于ping以及TTL的分析【转】

    转自:http://blog.csdn.net/u013451221/article/details/46608881 首先介绍一下ping这个工具 ping [目标] 的意思就是向目标发送几个数据包 ...