compass编译
‘壹’ compass 编译 出 css 默认有注释
你好，这个问题其实不难，只需要简单的修改下compass的配置就可以了
1、打开项目根目录下的 config.rb 文件
2、搜索 line_comments 关键词，默认应该是 # line_comments = false
3、去掉前面的 #，保存 config.rb
4、重新执行 compass compile
这样编译出来的 css 文件中就不会包含自动生成的行注释信息了。
希望能帮你解决问题，望采纳~~
‘贰’ 用compass编译sass,进入目录后执行compass watch 后然后书写scss文件却没有进行编译，这是怎么回事呢
您好，这样的：
Sass的安装:
1.安装：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后，就可以使用了。
2：使用：
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。SASS提供两种编译方式，一种是手动编译，一种是监视编译(–watch)，手动编译就是当你撰写好CSS时下指令去做编译，监视编译则是你指令一个目录，当此目录里面的*.scss档案有改变时（新增、覆写等等），就会自动去做编译的动作。先来讲手动编译方式：
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass –style compressed test.sass test.css
还有一种监视的方式做编译，在命令行中切换到当前sass或者scss文件所在的目录，然后运行
sass –watch scss:css
SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。
Compass的安装:
1.安装：安装ruby之后，输入命令
gem install compass
2.使用：创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录，运行：
compass create "projectname"
这个命令会创建一个包含一系列文件的目录，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以删除。
在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。
实时编译 SASS 文件
COMPASS 提供的默认方法是：
在命令行下切换到项目目录，运行
compass watch
COMPASS 将会实时监控 SASS 目录的文件变化，只要你一保存文件，立即将相应文件编译为 CSS 文件。
‘叁’ Compass的简介
CSS预处理器(CSS Preprocessor)，是一种构架于css之上的高级语言，可以通过脚本编译生成CSS代码，其目的是为了让CSS开发者的工作更简单有趣，当前已经进入了较为成熟的阶段，基本上新的web开发项目大都已普遍使用。
现在最主要的选择有： SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS，着名的Twitter Bootstrap就是采用SASS做底层语言的。 LESS 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代。 Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。 推崇的组合是，SASS+Compass+Twitter Bootstrap+bootstrap-sass，这一组合能够获得最好的底层语言SASS，最好的框架Compass，和Bootstrap提供的最强大的UI组件库(被bootstrap-sass翻译成SASS的风格)。
‘肆’ keyframes在compass里怎么写会自动编译带有浏览器前缀的css
引起修改维护巨大工作量的原因就是html5标准未在各个浏览器上标准统一实现，各个浏览器加入了自己的前缀来实现支持，这就造成了实际开发中去对各个浏览器兼容而产生了巨大的工作量。而解决这一问题的办法无疑是去用javascript来规避浏览器前缀带来的麻烦。
‘伍’ compass创建项目生成的-sass-cache有什么作用可以删除吗
缓存相关的东西，预处理器编译一次就会生成，可以删除，但是下次再编译的时候还会产生的，所以就放那好了，产品要发布的时候只要css就可以了。
‘陆’ 如何用grunt创建compass和自动刷新
在grunt serve启动时当.sass文件发生变化时，自动编译更新.css文件
HOWTO
我觉得你首先要弄明白是哪个任务使得grunt serve任务执行时能够检查文件变化并进行编译。
在这里是watch这个task，关于grunt-contrib-watch请点击查看文档
TODO
在watch的任务中需要指定对.sass文档的编译任务
这里参考grunt-contrib-watch的官方给出的代码
https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html
grunt.initConfig({
sass: {
dev: {
src: ['src/sass/*.sass'],
dest: 'dest/css/index.css',
},
},
watch: {
sass: {
// We watch and compile sass files as normal but don't live reload here
files: ['src/sass/*.sass'],
tasks: ['sass'],
},
livereload: {
// Here we watch the files the sass task will compile to
// These files are sent to the live reload server after sass compiles to them
options: { livereload: true },
files: ['dest/**/*'],
},
},
});
CONCLUSION
好好读读grunt-contrib-watch的官方文档，你要的都在里面
‘柒’ 为什么要用compass
作者：刘雄
链接：http://www.hu.com/question/31247883/answer/52151193
来源：知乎
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
问题是“为什么要使用 compass”，我更想回答的是“为什么不使用 sass”。
最早的时候，公司里的项目对于 sass 和 less 都有实践，stylus 也有很少的一部分，在不到两年的时间里，现在基本上所有的项目都是使用 less.
sass 和 less 在语言特性上并没有太大的区别，主要的区别点是前者基于 ruby, 而后者基于 nodejs。现阶段前端所有的工程环境基于 node 都可以基本搞定，诸如用 php 写 demo 的方式已逐渐退出前端的视线，因此，一套 node 环境已足以满足需求，为了 sass/compass 再引入一个 ruby 的环境完全没有意义。
在多人合作中，sass 需要配置 ruby, gem, 甚至需要更换 gem 源，对于大多数人来讲，这并非什么难事，但我遇到过 N 多次，同事在接手项目时因为 ruby 的版本，sass 的编译问题消耗大量时间。当然，现在也有 node-sass 这样的工具，但是在我的尝试过程中体验并不好（因为 node 版本会报错）。
弃用 compass 之后，带来的唯一问题是 sprite 的功能，至今我也没找到一个比 compass 更强大的 sprite 工具，不过，随着 iconfont 的兴起，使用 sprite 的场景越来越少，自己用 ps 去合一下成本很低，因此也就没什么好忧伤的了。
‘捌’ 如何安装Compass
一、Compass是什么？
简单说，Compass是Sass的工具库（toolkit）。
Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。
Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby。
二、安装Ruby
Windows下可以选择安装RubyInstaller for Windows，我选择的版本是Ruby 2.1.7。
三、修改gems源地址
由于网络原因，需要将原装gem源地址转化为稳定的镜像地址：
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
四、安装Compass
$ gem update --system
$ gem install compass
五、使用Compass
$ compass create myproject
‘玖’ 我为什么不再用Compass写CSS
我不得不承认，CSS非常棒，但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢？特别是当项目越来越大，代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式，那么对于CSS开发的人员来说。绝对是一个不省心的工作！
而当CSS编译器真正来到的时候，完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。
Time to keep it simple, no time for the stupid!
会议一下作为前台开发人员，你写过多少次这样的代码?
ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }
或许你也感叹过，我到底要写多少个ul li阿？ 真是无用功！
没错，的确是！
那么对于颜色，字体大小，或者margin/padding这些在CSS中随时重复的东西。试想一下，你如果想修改一些东西，确发现，你要修改的东西到处都有。这样情况大家都遇到过！绝对是噩梦！
你的样式表里的样式呢？是不是已经厌倦了老是使用同样的样式？修改样式？兄弟，这可不是简单的活儿！
怎么去解决这样的问题呢？ SASS！
编译CSS？什么？没搞错吧？
不要大惊小怪！如果你不是一个熟悉终端的开发者，或者说是windows中的cmd。那么这里有很多的解决方案可能让你放弃选择终端来管理项目。不过这里让我们退一步说。
SASS赋予你修改你的CSS并且生成真正的CSS文件的能力。简单说来，它就是察看SASS文件，并且生成正确的CSS文件。
那么，如果你需要修改CSS，那么你就使用命令通过SASS文件来直接生成CSS文件。一旦你保存了SASS文件。就不需要管理CSS文件了。因为只需要花几秒，你就能生成需要的CSS。当然你需要时间来熟悉这些，不过对于开发来说，绝对值得！
样式嵌套
首先最让我喜欢的SASS和SCSS的地方在于语法拥有样式嵌套。这使得和你的样式结合使用起来非常的简单。例如，你有如下HTML：
link 1
link 2
在SASS中，你将能够书写如下结构：
ul {
padding: 0px;
margin: 0px;
width: 210px;
li {
float: left;
width: 100px;
margin: 0px 10px 0px 0px;
&.last {
margin: 0px;
}
a {
color: #232323;
&:hover {
color: #121212;
}
}
}
}
是不是非常的清楚？ 最后你可以使用HTML里方式来嵌套你的CSS。你可以使用任何CSS选择器来使得流程更加简单！
我同样也添加了一些在SASS中经常使用的很多不错特性: "&" 标号。这个将告诉SASS来设定一个额外的规则。因此使用class .last定义的li元素将使用这个方法。不用去创建一个新的规则。悬浮的anchor标签也同样使用这个方法。非常实用！
变量，Mixin和选择器继承
样式代码片断的重用使得CSS非常的动态，这也是SASS最擅长的。
变量很简单。定义并且使用在你的SASS文件中：
$background: #040404;
$text-color: #fefefe;
$standard-margin: 16px;
body {
background-color: $background;
color: $text-color;
input {
background-color: $background;
color: $text-color;
margin: $standard-margin;
}
}
定义了一个变量$varname：value并且在代码中使用$varname。
Mixin有点儿像变量但是主要为了样式片断。你可以告诉SASS冲用一部分的代码片断并且包含在样式里。你甚至可以指定参数使得他们动态。就像你给CSS写方法一样。
@mixin ptsans {
font-family: 'PT Sans', sans-serif;
}
@mixin absolute-positioned($top, $left) {
position: absolute;
top: $top;
left: $left;
}
body {
@include ptsans;
position: relative;
#notifier {
@include absolute-positioned(20px, 100px);
}
}
使 用@mixin mixinname{这里写样式}来定义一个mixin ，或者使用@mixin mixinname($parameter1){somestyle:$parameter1}。非常适合重复的样式和CSS3的fallback内容。 你可以添加很多的样式到mixin里然后很方便的重用。
最后要说的是selector继承。这允许你像mixin那样取得一段样式，并且继承扩展它。这样你可以在实际的CSS中放入同样的代码，但是扩展CSS规则。这里举一个例子：
CSS源代码：
.error, .succes {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
color: green;
border-color: green;
}
SCSS：
.error {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
.error;
color: green;
border-color: green;
}
是不是简单明了。