Sublime Text 3 编译 Sass 总结

  • A+
所属分类:开发者工具

Sass 和 SCSS 有什么区别?

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号{}和分号; ,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。所以大多数同学都喜欢用scss方式来写Sass,我也不例外。

编译Sass的方式:

编译Sass的方式大致可以分为几个大类:

  • 命令编译
  • GUI工具编译
  • 自动化编译

命令编译就是使用终端输入Sass命令来编译Sass,

单文件编译:

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

 

多文件编译:

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

Sublime Text 3 编译 Sass 总结

GUI 界面工具编译

推荐每款目前流行的工具:

自动化编译

前端自动化我想大家都应该有所了解,常见的就是Grunt 和 Gulp。

这里介绍一下gulp编译Sass

好了上面的纯属装逼,下面开始正题:配置sublime text 3编译Sass环境。

首先安装Ruby环境

sass是基于ruby的产物,因此在安装sass前需要先安装ruby,如果用命令方式编译Sass也是必须安装ruby的。

下载Ruby windows 安装包 http://rubyinstaller.org/downloads/

下载好后直接运行rubyinstaller-2.3.0-x64.exe这个文件,Add Ruby executables to your PATH添加环境变量的选项必须选择上,否则后面还需自己手动添加。Sublime Text 3 编译 Sass 总结

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

安装Sass方式:

  • 通过命令安装 Sass
  • 通过 Compass 来安装 Sass
  • 本地安装 Sass
  • 淘宝 RubyGems 镜像安装 Sass

这里介绍下通过命令安装Sass,在开始菜单启动Start Command Prompt with Ruby,然后输入:

如果出现被墙的情况,可以使用代理或者考虑上面的其他安装方式进行。

Sublime Text 3 编译 Sass 总结

安装完Sass之后,就可以通过sass命令来进行编译了,但这又回到了命令编译方式。

sublime text 3安装sass和Sass 和 SASS Build插件

利用packagecontrol工具可以直接安装这两款插件。Sublime Text 3 编译 Sass 总结

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

Sass编译出来的样式风格有4种:

  • 嵌套输出方式 nested 它是默认值
  • 展开输出方式 expanded
  • 紧凑输出方式 compact
  • 压缩输出方式 compressed 生产环境当中一般使用这个

四种style生成后的css:

执行编译

首先得新建一个scss文件,比如test.scss(编码必须是UTF-8),并写点Sass代码,保存之后,按下快捷键Ctrl+B

Sublime Text 3 编译 Sass 总结

如果表示编译成功,并自动生成了test.css和test.css.map两个文件,然后就可以在html种引用这个css文件了。注意在编译的时候test.scss文件模式必须设置为Sass,在sublime工具的右下角可以看到。

通过sublime来编译Sass可以实时进行,所以就没有了watch等一些监听源文件的功能。

Sublime Text 3 编译 Sass 总结

以上就是全部步骤,像我一样喜欢sublime的前端同学可以参考折腾一下。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: