http://www.fawwheel.com/shahramLu/p/6477731.html

webstorm下的sass自動編譯和移動端自適應實踐

1、安裝Ruby

2、安裝sass

3、webstorm配置file watcher

4、移動端自適應

1、安裝Ruby

　　安裝Ruby，有多種方式，打開官網下載

因為，使用的是window選擇RubyInstall，下載地址

RubyInstall下載地址

選擇對應系統的版本，下載完成，安裝

添加到path，建議勾上，安裝完成後，打開開始面板，會有一個Start Command Prompt with Ruby，命令行工具。

2、安裝sass

　　個人偏好sass，也可以選擇less或stylus，打開上一步安裝的Ruby命令行

輸入gem list 看一下安裝了那些包，接著gem install sass

3、webstorm配置file watcher

　　打開webstorm，File -> settings -> Tools -> File Watchers

選擇+號，新建scss

在輸出參數位置，一般會加上--style *；展開格式nested，expanded，compact，compressed，最傳統的選擇--style expanded,括號上下換行

工作文件夾和輸出位置，可以根據項目來選擇，放在同級目錄，或者父級，點擊insert macros

常見的有文件路徑，父文件路徑等等，可以自己嘗試下，加深理解

4、移動端自適應

　　最後，來個實戰，基於單頁面，做到了大多數手機屏幕很好的適應，包括DPI為2 和 DPI為3的都可以適應

選擇淘寶的開源庫lib-flexible，參考airen大神寫的文章

因為內容較少，只是宣傳頁面，所以沒有選擇vue這類框架

直接HTML走起，因為使用了淘寶開源庫，就不需要常用的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

直接在head下引入阿裏雲的cdn

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

搭配sass的mixin效果很棒

 1 @mixin font-dpr($font-size) {
 2   font-size: $font-size;
 3 
 4   [data-dpr="2"] & {
 5     font-size: $font-size * 2;
 6   }
 7 
 8   [data-dpr="3"] & {
 9     font-size: $font-size * 3;
10   }
11 }
12 
13 $baseFontSize: 75;
14 $FontSize: 16;
15 @mixin px2rem($name, $px1){
16   #{$name}: ($px1 / $baseFontSize) * 1rem;
17 }
18 
19 @mixin bg-image($url) {
20   background-image: url($url + "@2x.png");
21   @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
22     background-image: url($url + "@3x.png");
23   }
24 }

對於font-size，需要使用px, 因為rem會導致，出現15.55px奇葩尺寸，中文點陣一般常用是12、14、16px

[email protected]@3x後綴

@include px2rem(padding, 25);  // 生成
padding: 0.33333rem;

@include bg-image(‘bubble‘);  // 生成
.wrapper .bubble {
  background-image: url("[email protected]");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .wrapper .bubble {
    background-image: url("[email protected]");
  }
}

@include font-dpr(18px);  // 生成
.content {
  font-size: 18px;
}
[data-dpr="2"] .content {
  font-size: 36px;
}
[data-dpr="3"] .content {
  font-size: 54px;
}

其中data-dpr是屏幕的DPI，詳細代碼查看GitHub

webstorm下的sass自動編譯和移動端自適應實踐