0%

[SASS] SASS 基礎概念 2

發表於 更新於 分類於 Disqus：

延續上一篇的主題，本篇將整理稍微進階一些、但更接近實作的相關應用，包含如何使用 SASS 來提升響應式設計的開發效率。

化簡知識庫：@mixin 設定常用語法，@include 召喚出來

這個語法可以省去一直回想原理跟技巧的時間。

基本用法：複製

  1. 寫在檔案起始處，@mixin 後面取一個變數名接中括號，裡面寫該變數所欲達成的效果。
  2. 後面需要呼叫該效果時，先寫選擇器加中刮弧，裡面先寫 @include，後面加變數名稱。
  3. @mixin 裡面寫的常用語法，會用「&」來表示所在的選擇器。例如：
    1
    2
    3
    &:after {
      clear: both;
    }

補充用法：參數

@mixin 也可以設參數，而且可以是複數的參數。

例如，先在開頭設定如下：

1
2
3
4
5
6
7
@mixin circle ($size, $bgcolor) {
  border-radius: 50%;
  height: $size;
  width: $size;
  font-size: $size / 3;
  background: $bgcolor;
}

之後要在某選擇器使用時，就可以簡單用一行字召喚出來了。

1
2
3
.box{
  @include circle (30px, #fff);
}

用途舉例

  • 圖片取代文字
  • 兼容各瀏覽器的 inline-block 的寫法
  • 各 CSS3 語法瀏覽器支援解決方案
  • 清除浮動
  • 用 CSS 畫各方向的三角型

溫馨提示：平常可以多累積自己的 mixin 資料庫，設一個 mixin 資料夾把學過的一些 CSS 技巧記錄成 .sass 檔存放進去。有些面試官光看應徵者的 mixin 庫就能了解這個人處理過多少專案了。

將 @mixin 用於開發 RWD

先用 @mixin 設定好斷點，各斷點可以取名為該裝置的名字，例如 pad、iPhone5 等。
接著在 media query 裡面只要加一個東西，那就是 @content。

1
2
3
4
5
@mixin iphone5{
  @media (max-width: 320px) {
    @content
  }
}

之後就先寫 PC 版的樣式，但在需要 RWD 的項目裡面，可以用 @include 呼叫斷點，然後直接寫 RWD 的樣式在裡面。

1
2
3
4
5
6
.header{
  width: 100px;
  height:100px;
  @include iphone5{
    height: 30; }
}

溫馨提示：應該常備一個 grid.scss 專放用 @mixin 設定好的 media query 斷點，在開發時就可以打開來複製到手上的新專案。

掌握了這兩篇介紹的 SASS 基礎，就相當夠用了。當然，之後如果有機會再吸收一些 SASS 技巧也會繼續分享的。