SCSS隨筆記

紀錄一些 SCSS 的相關語法

語法導覽

• Variable 變數
• Nesting 巢狀結構
• & 無縫選取器
• @Import 匯入
• @mixin 混合

Variable 變數

建立變數的方式：

// colors
$primary-white: #fff;
$primary-orange: hsl(31, 77%, 52%);
$normal-cyan: hsl(184, 100%, 22%);

// fonts
$primary-font-size: 15px;
$primary-font-family: 'Lexend Deca', sans-serif;
$primary-font-line-height: 1.5;

網頁中很常用到的色彩、文字設定等，都很適合拿來存在變數中。

可以設定的值：

• 數值：（0)
• 字串：（'Jim', "Jim", Jim）
• 顏色：（#000）
• 布林值：（true, false）
• 空值：（null）
• 陣列：（10px 20px 30px, Arail, sans-serif）（以空格或逗號隔開）
• maps：（(key1 : value1, key2: value2)）類似物件

Nesting 巢狀結構

假設我們有一段 HTML 的結構如下：

<div class="wrap">
  <div class="container">
    <h2 class="heading"></div>
    <img class ="pic" src="/path">
    <p class="txt"></p>
  </div>
</div>

以往在 CSS 中可能得這樣子寫：

.wrap {
  /* ... */
}

.wrap .container {
  /* ... */
}

.wrap .container .heading {
  /* ... */
}

/* 以此類推 */

但如果是 SCSS：

.wrap {
  // ...
  .container {
    // ...
    .heading {
      // ...
    }
    .pic {
      // ...
    }
    .txt {
      // ...
    }
  }
}

顯然 SCSS 不管在簡潔還是結構上看起來都大勝 CSS 吧！
不過別忘了，當 SCSS 被編譯成 CSS 後，其實就和第一個長的一模一樣哦。

& 無縫選取器

注意：這個名稱是我自己發明的，純粹是覺得「連結選取器」這個名字太饒口。

它真正的意思是：

The ampersand (&) is a wonderful little character. It’s an ancient symbol, a ligature of the Latin “Et,” that connects words, phrases, and thoughts.

意思是說，&是一個來自拉丁文中的 連字符號 (Et)” ，用來把文字、片段、思想給連接起來。

現今我們會用 & 來表示英文的「and 或 as well as」，或是中文的「且」，
但都跟他最原始的意思差不多，總而言之，都是用來把 A 跟 B 給連在一起的意思

在 SCSS 中也是一樣，讓我們看個示範：

.btn {
  color: black;
  &:hover {
    color: white;
  }
}

等於：

.btn {
  color: black;
}
.btn:hover {
  color: white;
}

你應該有看出來，正常情況下.btn跟:hover之間應該要有一個「空格（空白字元）」，
但現在用了 & 這個符號後，這個空格就會消失了，這也就是為什麼我會叫他無縫的原因。

當然，你也可以用正規的解釋，意思是把.btn跟:hover給連結起來，這樣也行，看你喜歡哪個就好了。

@Import 匯入

你可以使用@import來匯入一個外部連結：

// google font
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap');

除此之外，你也可以利用@import來做一件很方便的事情。

首先聰明的你知道，把檔案分開來比較好做管理，所以你有 3 個檔案，分別為：

• reset.scss
• layout.scss
• page.scss

但是你也知道， SCSS 寫完後還得做編譯這件事，所以我們得編譯 3 次，

所以當檔案越來越多的時候，絕對會變得很麻煩，有沒有更好的做法？

有，就是用@import的方式來操作。

我們只需要在建立一個all.scss檔案，並且把其他檔案都加上下底線_，像這樣：

加下底線是用來代表，這是一個被拿來合併的檔案。

• all.scss
• _reset.scss
• _layout.scss
• _page.scss

接著在 all.scss 中去引入另外 3 個檔案，像這樣：

// 在 all.scss 引入另外 3 個檔案
// 此處要引入的檔案不需要加上下底線
@import 'reset';
@import 'layout';
@import 'page';

這樣子 all.scss 就會按照順序去引入這些檔案，而之後你也只需要去編譯 all.scss 這個檔案即可。

@mixin 混合

💡 註：你也可以把它想成是山寨版的function，他可以設定參數及帶入變數，但沒有if / for的功能。

簡單來說就是把一群值給集合起來，所以才叫mixin。

舉個最簡單的例子：

@mixin border-radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.box {
  @include border-radius;
}

如果現在你有 10 個區塊都要用到border-radius，你會想寫 50 行還是 5 行呢？

設定參數

不同區塊的border-radius值可能不一樣，所以這時候改成用參數來設定，就可以帶來更大的彈性：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}
.box {
  // 現在可以自訂radius的值囉！
  @include border-radius(10px);
}

預設參數值

有沒有聞到 ES6 的味道？

如果你希望參數能有個預設的初始值，那你可以這樣子寫：

@mixin border-radius($radius: 10px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

.box {
  // 如果不指定值，就採用預設值 (10px)
  @include border-radius(10px);
  // 如果指定值，就套用設定的值 (20px)
  @include border-radius(20px);
}

省略部分參數值

舉個例子：

@mixin background(
  $size: cover,
  $position-x: center,
  $position-y: center,
  $repeat: no-repeat
) {
  background-size: $size;
  background-position: $position-x $position-y;
  background-repeat: $repeat;
}

.box {
  @include background;
}

如果現在我只想修改$repeat的值，那在@include的時候該怎麼寫呢？

.box {
  @include background($repeat: repeat);
}

很簡單，只要把想要修改的那個參數叫出來設定即可，而其他的沒動到的部分就會自動套用預設值。

帶入變數

如果你要在@mixin裡面引用某個變數也是 OK 的。

$value: 10px;
@mixin border-radius {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  -ms-border-radius: $value;
  -o-border-radius: $value;
  border-radius: $value;
}
.box {
  @include border-radius;
}

利用 @content 加入額外的內容

如果有些東西是額外添加的，不想寫死在@mixin中，你可以使用@content，就可以讓你在使用@mixin的時候能夠額外寫入一些自己想寫的東西。

這裡拿media query來做一個示範：

@mixin mediaQuery-pc {
  // 桌機板的 media
  @meida screen and (min-width: 760px) {
    // 內容自己填
    @content;
  }
}

.box {
  padding: 10px;

  @include mediaQuery-pc {
    padding: 20px;
  }
}

這樣子寫的話你的media query就會乾淨很多。

這裡提供一個簡單的 RWD 示範：

See the Pen by jim (@jubeatt) on CodePen.

💡 註：方塊的顏色會隨著寬度做改變。

參考資料

sparkbox
30 天掌握 Sass 語法 - (5)利用 Sass「@import」進行 CSS 檔案模組切割
30 天掌握 Sass 語法 - (18)規劃你的 Sass 結構
SASS 教學 ＋ SCSS：CSS 再進化，掌握語法攻略！
SCSS 15 分鐘入門