---
tags: CSS
---
# Sass, Scss

- CSS preprocessor
- Sass: Syntactically Awesome Style Sheets
- Scss: Sassy CSS
- `--watch` 可以在 `scss` 檔改變時，自動 re-compile `css` 檔。

## Sass vs SCSS

舊版的 Sass 採用 Ruby 編寫，語法不用寫大括號以及分號：

$primary-color: #333

body
  color: $primary-color

但無法兼容舊有的 CSS，所以沒有那麼普及。後受 Less 影響，Sass 發展出兼容 CSS 的新語法，變成 SCSS，語法中就會包含大括號以及分號，之後越來越受歡迎。

## Compass

Sass 的框架，有許多預寫好的 mixin 可使用。

div {
  @include border-radius(5px);
}

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  ...
}

## [Variables](https://sass-lang.com/documentation/variables)

可以存一些需要 reuse 的資料，例如顏色、大小、字體等任何變數。所以當有人靠杯說顏色或字體很醜要換一個時，可以直接修改一個變數，而非許多參數。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

## Nesting

結構清清楚楚。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

## Partials

以 `_` 開頭的檔案，Sass 會知道這份檔案不須被編譯，這份檔案只會被其他檔案以 `@use` 當作 module 使用。

## [Modules](https://sass-lang.com/documentation/at-rules/use)

`@use` 來 include 其他檔案，注意可以不用加底線。

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333 !default;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;  /* #333 */
}

若變數有設置 `!default` ，代表此變數可以被替換掉：

@use 'base with (
  $primary-color: #444;
);

.inverse {
  background-color: base.$primary-color;  /* #444 */
}

## [Mixins](https://sass-lang.com/documentation/at-rules/mixin)

跟 Function 很像，但是是**回傳一段 CSS**，可以在其中定義許多 declarations，可傳遞參數，參數也可以以 `:` 來給 default value。外部使用時用 `@include` 來呼叫。

@mixin transform($property: 10deg) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

.box2 {
  @include transform(rotate($property: 30deg));
}

搭配上 `#{...}` 的 interpolation 也可以用在定義一堆 CSS 上：

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);
@include corner-icon("phone", top, left);

## [Functions](https://sass-lang.com/documentation/at-rules/function)

- 跟 Mixin 很像，但是是**回傳一個值**。
- Function 名稱的 `-` 和 `_` 是通吃的，所以 `scale-color == sacle_color`

@function pow($base, $exponent: 1) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  margin-left: pow(4, 3) * 1px;  /* 64px */
}

也可傳多個參數：

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);  /* 180px */
}

$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...);  /* 180px */
}

## [Extend / Inheritance](https://sass-lang.com/documentation/at-rules/extend)

以 `@extend` 來繼承 CSS properties。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

`&` 用來串接 CSS 的 naming：

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

`&` 也能用於串接 `:hover` 等 action：

.slider {
  coler: black;

  &:hover {
    color: red;
  }
}

## [Operators](https://sass-lang.com/documentation/operators)

div {
  width: 600px / 960px * 100%;  /* 62.5% */
}

## [Colors](https://sass-lang.com/documentation/modules/color)

有許多 color function 可以使用。

@debug scale-color(#000000, $lightness: +15%);  /* #262626 */
@debug mix(#000000, #FFFFFF);  /* gray */
@debug complement(green);  /* purple */

## [Lists](https://sass-lang.com/documentation/values/lists)

@debug nth(10px 12px 16px, 2);  /* 12px */
@debug nth([line1, line2, line3], -1);  /* line3 */

## [Booleans](https://sass-lang.com/documentation/values/booleans)

@debug if(true, 10px, 30px);  /* 10px */
@debug if(false, 10px, 30px);  /* 30px */

## 參考資料

- [Sass Basics](https://sass-lang.com/guide)
- [Sass Documentation](https://sass-lang.com/documentation)