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;
}
是不是簡單明了。