scss牛刀小試：解決css中適配瀏覽器前綴問題

在css中爲適配瀏覽器，新特性總加 -webkit，-o， -moz 來適配瀏覽器，寫的煩心，看着也臃腫，讓css可讀性下降，下面以陰影爲例，如何使用scss讓咱們的css看起來更簡潔。

本人使用的IDE爲intellij_idea，關於scss怎麼用，出門左轉

以陰影爲例：當你在test.scss中寫:

---

1 @import "Function";//引入自定義Function函數
2 div{
3   width: 200px;
4   height: 200px;
5   margin: 40px;
6   @include box-shadow(1px,3px,10px,0,#48AFF3);
7 }

 

便會自動生成:test.css

---

div {
  width: 200px;
  height: 200px;
  margin: 40px;
  -webkit-box-shadow: 1px 3px 10px 0 #48AFF3;
  -o-box-shadow: 1px 3px 10px 0 #48AFF3;
  -moz-box-shadow: 1px 3px 10px 0 #48AFF3;
  box-shadow: 1px 3px 10px 0 #48AFF3; }
/*# sourceMappingURL=test.css.map */

以下：而後在HTML中引用該css便可

 

---

附：Function.scss

---

 

1 //陰影(水平移值，垂直移值，陰影模糊值，陰影外延值，顏色)
2 @mixin box-shadow($h,$v,$vage,$extende,$color) {
3   -webkit-box-shadow: $h $v $vage $extende $color;
4   -o-box-shadow: $h $v $vage $extende $color;
5   -moz-box-shadow:  $h $v $vage $extende $color;
6   box-shadow: $h $v $vage $extende $color;
7 }

當你使用其餘新特性時，不妨封裝成方法調用，一次辛苦，之後輕鬆，作個快樂的敲碼者。