课程表

SASS 基础

SASS 高级

工具箱
速查手册

Sass 编译

当前位置:免费教程 » HTML/CSS » SASS

sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

在线编译

因为实在太不起眼,放在后面可能会被忽略,拿到前面来吧。这个网站支持SASS的在线编译:http://sassmeister.com/(有时可能打不开)


命令行编译

  1. //单文件转换命令
  2. sass input.scss output.css
  3. //单文件监听命令
  4. sass --watch input.scss:output.css
  5. //如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
  6. sass --watch app/sass:public/stylesheets

命令行编译配置选项

命令行编译sass有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v查看详细。我们一般常用两种--style``--sourcemap

  1. //编译格式
  2. sass --watch input.scss:output.css --style compact
  3. //编译添加调试map
  4. sass --watch input.scss:output.css --sourcemap
  5. //选择编译格式并添加调试map
  6. sass --watch input.scss:output.css --style expanded --sourcemap
  7. //开启debug信息
  8. sass --watch input.scss:output.css --debug-info
  • --style表示解析后的css是什么排版格式;
    sass内置有四种编译格式:nested``expanded``compact``compressed
  • --sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

四种编译排版演示

  1. //未编译样式
  2. .box {
  3. width: 300px;
  4. height: 400px;
  5. &-title {
  6. height: 30px;
  7. line-height: 30px;
  8. }
  9. }

nested 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style nested
  3. /*编译过后样式*/
  4. .box {
  5. width: 300px;
  6. height: 400px; }
  7. .box-title {
  8. height: 30px;
  9. line-height: 30px; }

expanded 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style expanded
  3. /*编译过后样式*/
  4. .box {
  5. width: 300px;
  6. height: 400px;
  7. }
  8. .box-title {
  9. height: 30px;
  10. line-height: 30px;
  11. }

compact 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style compact
  3. /*编译过后样式*/
  4. .box { width: 300px; height: 400px; }
  5. .box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style compressed
  3. /*编译过后样式*/
  4. .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

软件方式编译

这里推荐koala&codekit,它们是优秀的编译器,界面清晰简洁,操作起来也非常简单。鉴于koala是免费编译器,简单操作如下图:

LESS/Sass 编译工具Koala介绍

易上手的Sass编译工具koala支持多个环境的安装文件 下载Koala

koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。


编译工具Koala介绍

越来越多的同学开始使用 less 等预处理器的方式来编写 CSS 跟 JavaScript ,比较流行的有 less 、 sass 、 coffeescript 。 Less 等代码无法直接在浏览器中执行,最终还是需要编译成 CSS 或 JS 。它们语法很棒,但是它们的编译方式却不够灵活。官方基本上都是只提供命令行的方式进行文件编译, less 还可以在页面中嵌入一个 less.js 进行在线编译,但这种方法实在是不靠谱。所以大家都喜欢使用图形界面工具来进行编译工作,高效快捷。在 koala 开发之前已经有一些工具了,比如 winLess 、 simpless 等,功能都比较单一,且只支持 less 。 还有一些同学折腾编辑器 sublime text 等,但目前还没有一个很完美的方案。还好,现在有了Koala。



koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。


关键特性

  • 多语言支持

    支持Less、Sass、CoffeeScript 和 Compass Framework。

  • 实时编译

    监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。

  • 编译选项

    可以设置各个语言的编译选项。

  • 项目配置

    支持为项目创建一个全局配置,为文件设置统一编译选项。

  • 错误提示

    在编译时如果遇到语法的错误,koala将在右下角弹出错误信息,方便开发者定位代码错误位置。

  • 跨平台

    Windows、Linux、Mac都能完美运行。

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号