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效果很棒

@mixin font-dpr($font-size) {
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

$baseFontSize: 75;
$FontSize: 16;
@mixin px2rem($name, $px1){
  #{$name}: ($px1 / $baseFontSize) * 1rem;
}

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

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

bg-image是用來自動識別DPI然后添加@2x或@3x后綴

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

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

@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