sass
编译有很多种方式,如命令行编译模式、sublime插件SASS-Build
、编译软件koala
、前端自动化软件codekit
、Grunt打造前端自动化工作流grunt-sass
、Gulp打造前端自动化工作流gulp-ruby-sass
等。
在线编译
因为实在太不起眼,放在后面可能会被忽略,拿到前面来吧。这个网站支持SASS的在线编译:http://sassmeister.com/(有时可能打不开)
命令行编译
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets
命令行编译配置选项
命令行编译sass
有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v
查看详细。我们一般常用两种--style``--sourcemap
。
//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info
--style
表示解析后的css
是什么排版格式;
sass内置有四种编译格式:nested``expanded``compact``compressed
。--sourcemap
表示开启sourcemap
调试。开启sourcemap
调试后,会生成一个后缀名为.css.map
文件。
四种编译排版演示
//未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.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,违者必究。