sass 使用 css預編譯

sass 預編譯的css工具

下載地址：www.sass.hk/sass-course.html
koala:圖形界面編譯工具 下載地址koala-app.com/index-zh.html#download

都安裝完成後

一、配置

啓動koala


sass compass選擇系中

sass 在命令下查看是否運行成功，確保安裝成功

二、添加項目

選擇項目的路徑，
項目中添加sass文件夾，所有的.scss文件都保存在這裏

三、開發

PHPStorm 的 SASS 插件

好像是自帶了該插件的，如果沒有的話，就打開 setting -> plugins 自己安裝一個吧，就不多說了

sublime
讓Sublime Text支持SASS開發說白了其實只要在其上安裝Sass及SassBuild這兩個插件即可，下面爲安裝步驟：

1、通過ctrl+shift+p快捷鍵組合打開命令面板

2、在命令欄中輸入”Sass”然後回車，然後在彈出的列表中選擇Sass插件，通過鼠標單擊或者回車進行安裝，可通過左下角狀態欄查看安裝結果

3、在命令欄中輸入”SassBuild”然後回車，然後在彈出的列表中選擇SassBuild插件，通過鼠標單擊或者回車進行安裝，可通過左下角狀態欄查看安裝結果

四、特徵

1、變量
$color: #888;
$bgColor: #f36;
$size:20px;

header {
  color: $color;
  background-color: $bgColor;
  text-align: end;
  font-size: $size;
}

2、混合器

//定義
@mixin ff($t) { //可傳遞參數
  -moz-border-radius: $t;
  -webkit-border-radius: $t;
  border-radius: $t;
}
//使用 定義在使用之前
@include ff(5px); 

3、文件導入

@import "imf"; //imf爲scss的文件，不需加擴展名