1.安裝sass 1.安裝ruby 因為sass是用ruby語言寫的，所以需要安裝ruby環境 打開安裝包去安裝ruby，記住要勾選 下麵選項來配置環境路徑 [x] Add Ruby executables to your PATH 安裝完成之後繼續下一步操作 2.安裝sass 在cmd里通過gem ...
1.安裝sass
1.安裝ruby
因為sass是用ruby語言寫的，所以需要安裝ruby環境
打開安裝包去安裝ruby，記住要勾選 下麵選項來配置環境路徑
- [x] Add Ruby executables to your PATH
安裝完成之後繼續下一步操作
2.安裝sass
在cmd里通過gem安裝sass
gem是ruby的包管理工具，類似於nodejs 的npm
gem install sass這個時候如果不FQ的話是會出問題的，因為：
由於國內網路原因（你懂的），導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過gem sources命令來配置源，先移除預設的https://rubygems.org源，然後添加淘寶的源https://ruby.taobao.org/，然後查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令gem install sass了
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系統不支持https，請將淘寶源更換成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 請確保只有 ruby.taobao.org
$ gem install sass安裝好之後執行sass -v就可以看到sass的版本了
實在實在不行，就安裝離線文件吧,但是失敗率也很高
gem install ./.../sass-3.4.22.gem
2.編譯sass文件的方式
1.命令行編譯
可以通過cmd命令行執行sass方法來編譯
例如：
sass scss/a.scss:css/a.csssass 後面寫要編譯的sass文件的路徑，‘：’後面寫的是
要輸出的目錄及名字
- 需要註意的是：必須有這個文件夾才能在裡面生成css
這樣的話寫一句執行一次編譯一次有些太麻煩
可以開啟一個watch來監聽文件變化來進行編譯
sass --watch scss:css--watch表示要監聽 ：前後的兩個都是文件夾，表示scss文件夾的文件改變就編譯到css文件夾
2.其他方式編譯
除了命令行工具其實還可以用考拉、gulp等工具進行編譯，但是ruby和sass是必須要安裝的
考拉的方式就不多做介紹了，大家i自己去看一下
gulp的話呢是需要gulp-sass的模塊來編譯，使用方式類似於gulp-less
這裡是網址，點擊查看
3.sass四種風格
sass編譯的格式
sass編譯輸出的css有四種格式
- nested 嵌套
- compact 緊湊
- expanded 擴展
- compressed 壓縮
這些樣式會影響輸出的css的格式
簡單介紹一下：
css預設輸出的嵌套
ul{
font-size:15px;
li{
list-style:none;
}
}---》
ul {
font-size: 15px; }
ul li {
list-style: none; }緊湊compact
在編譯的時候需要執行
sass --watch scss:css --style compact這個時候輸出的代碼就是
ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }compressed 壓縮
在編譯的時候需要執行
sass --watch scss:css --style compressed--->
ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}expanded 擴展
更像是平時寫的css一樣
在編譯的時候需要執行
sass --watch scss:css --style expanded--->
ul {
font-size: 15px;
}
ul li {
list-style: none;
animation: all 0.3s;
}compressed 壓縮
更像是平時寫的css一樣
在編譯的時候需要執行
sass --watch scss:css --style compressed--->
.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}4.sass與scss
sass的兩個語法版本
sass一開始用的是一種縮進式的語法格式
採用這種格式文件的尾碼名是.sass
在sass3.0版本後我們常用的是sassy css語法，擴展名是.scss，更接近與css語法
兩個版本的區別
- 尾碼名不同 .sass和.scss
- 語法不同，請看下麵
新版：
/*新版本
多行文本註釋*/
//新版本
//單行文本註釋
@import "base";
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}老版本：
/*新版本
多行文本註釋
//新版本
單行文本註釋*/
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none
