對CSS預處理這個東西的看法，基本就是2種

第一種：不就是css嗎，我會寫就好了搞得那么復雜干嘛

第二種：感覺這個東西非常有必要，它規范了代碼，使開發變得更輕松

好吧以前我是第一種，并且覺得又要配置環境，又要按照他的寫法非常的麻煩！用了一陣子之后發現有點離不開它了！囧~~

實際上很多東西不是你主觀認為他沒有意義就不去用。。。畢竟它存在，而且大公司都在用，這就說明著這個東西肯定有優點！

好吧，我用的是sass然后對nodeJS至今還是有點小抵觸。。。我就叛逆了~~吐槽結束！！！

?

在線測試版：http://sassmeister.com/

然后什么情況要用到mixins看著bootstrap你就明白了-_-//

?https://github.com/twbs/bootstrap/tree/master/less

?

?

?

先說安裝吧！這個東西不用和nodejs那樣搞得那么復雜

裝個ruby。。。

Ruby下載安裝

?

....一路無話

然后安裝

gem install sass

按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近因為墻的比較厲害，如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略。

如果要安裝beta版本的，可以在命令行中輸入

em install sass --pre

你還可以從sass的Git repository來安裝，git的命令行為

git clone git://github.com/nex3/sass.git cd sass rake install

升級sass版本的命令行為

gem update sass

查看sass版本的命令行為

sass -v

你也可以運行幫助命令行來查看你需要的命令

sass -h

淘寶RubyGems鏡像安裝 sass

由于國內網絡原因（你懂的），導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過gem sources命令來配置源，先移除默認的https://rubygems.org源，然后添加淘寶的源https://ruby.taobao.org/，然后查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令gem install sass了，關于常用gem source命令可參看：常用的gem source

$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES ***https://ruby.taobao.org # 請確保只有 ruby.taobao.org $ gem install sass

最后安裝好了

然后寫了。。。當然怎么寫我在這里就不說了，畢竟大漠，阮一峰之類的大大都已經很久以前就寫過了，參照他的文章看看就好了

大漠sass基本寫法 阮一峰SASS用法指南

?

然后該怎么調試呢

?

我是比較喜歡用firefox

首先我們需要安裝一個FireSass for Firebug

如果百度百度不到最新版的，我這邊到是有個

?

http://files.cnblogs.com/files/LoveOrHate/firesass_for_firebug-0.0.12-fx.xpi

然后scss的文件出現在firebug上咯

但是你會發現寫的變量，函數都沒有出來！怎么辦呢

sass --watch --style expanded style.scss:style.css

這個時候我們找到項目目錄里面的scss。開啟調試模式

然后

?

然后你的一些mixin，@import，繼承，參數全部都執行了！！

（最后還是把別人的簡化復制一個出來，下面內容原地址：http://caibaojian.com/use-sass-compass-write-css.html）

?

?

1.Variables 變數
使用$作為開頭當參數

2.Nesting 巢狀結構
很清楚的知道 誰是誰的子元素，不用像以前一樣 寫一大排重復的開頭了

3.Mixins
其實就像function一樣使用，還可以帶參數

設定預設參數

4.Inheritance 繼承

另外幾個常用的功能

1.@import
可以將網站的各部份樣式拆開成_head.scss, _body.scss, _foot.scss放置在base資料夾下，可利用@import功能把3個檔納入到main.css裡

只要在main.scss加上

@import "base/head"; @import "base/body"; @import "base/foot";

_head.scss, _body.scss, _foot.scss 這些檔案都不會被編譯成css，記得檔案名稱需以 _ 底線作開頭!

2.算數

3.顏色功能

lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%

更多功能參見官方說明

?

?

http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-1.html

http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-2.html

?

?

轉載于:https://www.cnblogs.com/LoveOrHate/p/4519336.html

總結

以上是生活随笔為你收集整理的SASS的一些使用体会（安装-配置-开启firefox的调试）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。