談談CSS預處理技術中for循環的應用-CSS Sprite

各類新技術的出現，推進着Web前端技術飛速發展，在提高用戶體驗的同時也方便開發者；

在前端優化時，咱們使用CSSSprite技術，把多個圖片合在一張圖片上，而後經過background-image，background-position來定位現實不一樣效果，這樣來達到減小HTTP請求，畢竟HTTP請求是至關昂貴的，可是HTTP請求是少了，開發人員工做量就大了，要定位圖片不是一件很方便的事情，很是麻煩，要一個一個地計算：

其實咱們能夠有點技巧，讓圖片排列有點規律，這樣能夠減小大量時間：

假如咱們的圖片是規律的，如每一個區域高都是30px，這樣咱們可能經過結合Sass裏for來快速現實對圖片的定位：

scss:

@for $i from 0 to 17{
      .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; }
}  

編譯結果：css

.d-icon-0 { background-position: 0 -0px; }

.d-icon-1 { background-position: 0 -30px; }

.d-icon-2 { background-position: 0 -60px; }

.d-icon-3 { background-position: 0 -90px; }

.d-icon-4 { background-position: 0 -120px; }

.d-icon-5 { background-position: 0 -150px; }

.d-icon-6 { background-position: 0 -180px; }

.d-icon-7 { background-position: 0 -210px; }

.d-icon-8 { background-position: 0 -240px; }

.d-icon-9 { background-position: 0 -270px; }

.d-icon-10 { background-position: 0 -300px; }

.d-icon-11 { background-position: 0 -330px; }

.d-icon-12 { background-position: 0 -360px; }

.d-icon-13 { background-position: 0 -390px; }

.d-icon-14 { background-position: 0 -420px; }

.d-icon-15 { background-position: 0 -450px; }

.d-icon-16 { background-position: 0 -480px; }

.d-icon-17 { background-position: 0 -510px; }

.d-icon-18 { background-position: 0 -540px; }

.d-icon-19 { background-position: 0 -570px; }

不管多少個圖片，使用Sass一句話搞定，不是方便，是至關方便。

這裏使用了@for $i from a to b;仍是一種是@for $i from a through b;$i是一個變量，本身隨便取，從a到b，to，through的區別是to 不包括b，through包括b，上面的例子，若是使用through，將多一個.d-cions-20{}