新手剛剛接觸SASS對安裝與編譯上面的不理解，能不能解釋一下？
額...本人是一個純新手，也許問的問題蠻笨的....之前沒看過SASS與LESS，今日剛剛接觸到，感覺很新奇，然後有一點很不理解額，SASS安裝先搭建RUBY環境，然後安裝，搭建環境和安裝的目的是為了編譯嗎？可是sublime text 不是自帶了編譯插件，可以把SASS或LESS轉換成CSS么？
有沒有老手可以幫忙理一下頭緒，感覺好亂，都混一團了
運行Sass的環境
Sass是基於Ruby開發的，所以要運行Sass都需要一個Ruby環境。但並不是說你要懂得Ruby，你只需要在你的電腦中安裝一個Ruby環境即可。如果你使用的是Mac電腦，那麼就不需要安裝，如果你使用的是Win系統，那麼需要先在電腦中安裝Ruby。也正是因為這個原因，很多同學覺得Sass要依賴於Ruby環境，而放棄使用Sass。
至於如何安裝Ruby，就不做過多闡述，因為現在的應用軟體安裝都是非常簡單的，一路下一步即可。
CSS預處理器——Sass、LESS和Stylus實踐【未刪減版】
Sass安裝對於Sass安裝來說是件非常簡單的事情，只需要在你的命令終端輸入一行命令即可：
gem install sass
提醒一下，在使用Mac的同學，可能需要在上面的命令加上sudo，才能正常安裝：
sudo gem install sass
如果你是一位Sass發燒友，你也可以通過--pre參數來安裝Sass開發版本，領略Sass的一些最新功能與特性：
gem install sass --pre
不過在天朝往往上面的命令讓你無法正常實現安裝，如果你碰到這樣的事情，那麼需要特殊去處理。可以到Rubygems網站上下載Sass安裝包,然後在命令終端輸入：
gem install &<把下載的安裝包拖到這裡&>
直接回車(Enter)即可安裝成功。如果你不確認你的Sass是否安裝成功，只需要輸入命令：
sass -v
看到版本號就表示安裝成功。
Sass編譯眾所周知，到目前為止，各瀏覽器是無法直接解析.scss或者.sass文件。換句話說，在Web實際掉用當中，還是需要調用.css文件。這個問題也困擾了很多初學者，常常有人會問，使用Sass進行開發，那麼是不是直接通過&
這樣一來，在Sass開發之後，要使用寫好的東西，讓Web頁面能調用，就得經過一個過程，這個過程就是Sass編譯過程。Sass的編譯有多種方法：
命令編譯如果你喜歡操縱你的命令終端，那麼可以直接通過命令終端來對Sass進行編譯，只需要命令終端輸入：
sass &<要編譯的Sass文件路徑&>/style.scss:&<要輸出CSS文件路徑&>/style.css
這是對一個單文件進行編譯，如果想對整個項目里所有Sass文件編譯成CSS文件，可以這樣操作：
sass sass/:css/
上面的命令表示將項目中sass目錄中所有.scss(.sass)文件編譯成.css文件，並且這些CSS文件都放在css目錄當中。
在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次修改保存.scss文件之後，都得得新執行一次這樣的命令，如此操作太麻煩，其實還有一種方法，就是在編譯Sass時，開啟watch功能，這樣只要你的代碼進行任何修改，他都能自動監測到代碼的變化，並且給你直接編譯過來。
sass --watch &<要編譯的Sass文件路徑&>/style.scss:&<要輸出CSS文件路徑&>/style.css
命令編譯就是這麼的簡單。當然，使用sass命令編譯時，可以帶很多參數。
如果平時工作中不太喜歡使用命令終端的同學，可以考慮使用GUI界面工具來對Sass進行編譯。當然不同的GUI工具操作方法略有不同。在此也不一一對編譯的界面工具做詳細的介紹。對於GUI界面編譯工具，目前較為流行的主要有：
- Koala
- Compass.app
- Scout
- CodeKit
- Prepros
自動化配置編譯Sass
喜歡自動化研究的同學，應該都知道Grunt和Gulp這兩個東東。如果您正在使用其中的任何一種，那麼你也可以通過他們來配置，也可以完成Sass的編譯。
//Grunt
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
sass: {
dist: {
files: {
"style/style.css" : "sass/style.scss"
}
}
},
watch: {
css: {
files: "**/*.scss",
tasks: ["sass"]
}
}
});
grunt.loadNpmTasks("grunt-contrib-sass");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("default",["watch"]);
}
//Gulp
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function () {
gulp.src("./scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("./css"));
});
gulp.task("watch", function() {
gulp.watch("scss/*.scss", ["sass"]);
});
gulp.task("default", ["sass","watch"]);
擴展閱讀
- SASS編譯
- Less/Sass編譯工具，koala使用指南
- SASS界面編譯工具——Codekit的使用
- SASS界面編譯工具——Koala的使用
- Nodejs+Grunt配置SASS項目自動編譯
Sass調試一直以來都是一件頭痛的事情，使用Sass的同學都希望能在瀏覽器中直接調試Sass文件，能找到對應的行數。值得慶幸的是，現在要實現並不是一件難事了，只要你的瀏覽器支持"Sourcemap"功能即可。早一點的版本，需要在編譯的時候添加--sourcemap參數：
sass --watch --scss --sourcemap style.scss:style.css
在3.3版本之上（我測試使用的版本是3.4.7），不需要添加這個參數也可以：
sass --watch style.scss:style.css
在命令終端，你將看到一個信息：
&>&>&> Change detected to: style.scss
write style.css
write style.css.map
這時你就可以像前面展示的gif圖一樣，調試你的Sass代碼。
擴展閱讀- SASS調試
- 實戰Sass3.3的Source Maps
- Source Maps 101
如果掌握了上面提到的知識，我想你已具備Sass的初級水平。你會安裝Sass、知道Sass語法、會編寫Sass代碼，也能編譯Sass，還能調試Sass代碼。但這僅僅是Sass的基礎知識。如果還要深入，還是需要花不少時間去學習與實戰的。
此文內容摘自：Sass帶來的變革
更多Sass相關內容：sass | 博客自由標籤
謝邀。
確實，各種編輯器或者 IDE 都可以通過插件或者原生就支持編譯各種語言，但是在團隊合作或者開源項目中，大家使用的開發環境都是不一樣的。而且，在項目越來越複雜的時候，你不可能手動一個一個去執行 less 命令去編譯 less 文件。
所以，在實際開發當中，我們都會提供一個的自動化構建方案，比如 grunt、gulp、fis 等，而不是依賴 編輯器/IDE 去編譯。估計你也在網上找了各種文檔看了。
所以我就簡單的說一下你的疑惑。1.編譯的目的是讓.sass這些文件變成.css文件，因為瀏覽器只認識.css文件。
2.編譯工具很多種，但是最終這些編譯工具都是調用ruby去幫忙編譯（less是調用nodejs去編譯）。3.你說的sublime text插件是編譯工具一種。編譯工具實現2個功能第一個就是幫你自動化完成編譯命令；第二個就是幫你完成編譯程序的安裝。因為有的編譯工具只實現第一個功能，所以教程上一般會先教你手動安裝編譯程序。所以，如果你用一個工具完成了編譯，但是你發現你壓根沒有裝編譯程序。那麼只是因為這個工具自帶了編譯程序而已，例如：koala。最終你看到各種教程要不就是教你使用編譯工具，要不就是教你怎麼安裝編譯程序，然後再怎麼使用編譯命令。這兩者並不衝突。SASS 需要編譯後才能變成 CSS 在頁面中使用，所以它需要一套編譯工具。
而編譯最主要的是一個解析演算法的問題，官方用了 ruby 語言實現了這個解析演算法，所以你想用官方編譯器的時候，就需要安裝 ruby。
非官方的插件，同樣也可以實現這樣一套解析演算法，所以也可以實現編譯。Sass/SCSS 只不過是 用 Ruby 語言寫的一段程序而已運行 Sass 本質上是執行一段 Ruby 程序，你不安裝 Ruby 解釋器，怎麼執行？
sass 這種 語法 瀏覽器不認識 所以需要 編譯成css 他是需要ruby這種語言來編譯
less 有種方法可以不編譯就使用 但是不適合生產環境 因為 less.js 可以解析less語法我用的phpstrom當我寫sass文件的時候 ,只要我配置了通過ruby安裝的sass的根目錄,他就能自動轉轉化成css
sass test.scss test.css
非常麻煩
如果你的sublime不用安裝ruby就能編譯的話也不難理解,畢竟他就是一種語法,有他固定的規則,按照規則解析就行了.所以你理解成sublime特意做的解析的規則.
但是我嚴重懷疑是你安裝了ruby的sass之後,他主動調用全局命令sass而已,而不是他來解析.總結就是他要編譯了才能用.而編譯很枯燥,需要你一做修改就調用命令行,還有很多參數要選.那麼你的sublime也好,我的phpstrom也好,樓上的gulp,grunt也好,都是為了讓你寫代碼方便而已,他們幫你自動編譯最近重裝電腦，剛好碰到這個問題。當時裝了sublime以及sass插件之後，用sublime編譯sass文件一直報「sass」不是**命令的錯（記不清楚了），然後意識到忘記裝ruby了。（sass依賴ruby）裝上ruby果然編譯通過。然後我再考慮，可能sublime的編譯其實利用的是跟dos類似的編譯方法。我感覺sublime只是作為輔助編譯的工具，而ruby才是sass編譯根本。沒有裝ruby的時候，我用sublime將.scss文件編譯成css沒有成功，不知樓主是怎麼成功的。
Less沒有用過，具體不清楚
瀉藥沒用過sass和less，基本上都是手寫css但是看官網安裝說明的話。。。應該是這樣的。。。RUBY安裝是 官方途徑sublime text 是第三方的插件。。
推薦閱讀：