Sass(Scss)のよく使う記法まとめ


# はじめに
普段Sassを使っていますが、結局CSSと比較して何ができるんだっけというところを忘れがちなので、公式ガイドを参考に記法をまとめておきます。
https://sass-lang.com/guide

なお、記法がSassとScssの2種類あるため、両方の記法を記載しています。

# そもそもSassとは
>Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
>Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。(訳)

※[公式サイト](https://sass-lang.com/)より引用

一言で言うとCSSの拡張言語です。
スタイルのネストやモジュールの仕組みなど、CSSをよりプログラムのように書くことができる機能が取り入れられています。

# 変数

`$`で変数を宣言し利用できます。
`$変数名: 値`

## Sassの場合

```sass:variable.sass
$font-default: Helvetica, sans-serif
$text-color: #111

body
  font-family: $font-default
  color: $text-color
```

## Scssの場合

```scss:variable.scss
$font-default: Helvetica, sans-serif;
$text-color: #111;

body {
  font-family: $font-default;
  color: $text-color;
}
```

## コンパイル後のCSS

```css:variable.css
body {
  font-family: Helvetica, sans-serif;
  color: #111;
}
```

# ネスト
HTMLのようにセレクターをネストして書くことができます。

## Sassの場合

```sass:nesting.sass
ul
  margin: 10
  padding: 10

  li
    display: inline-block

    a
      display: block
      padding: 6px 12px

      &:hover
        color: #666
```

## Scssの場合

```scss:nesting.scss
ul {
  margin: 10;
  padding: 10;

  li {
    display: inline-block;

    a {
      display: block;
      padding: 6px 12px;

      &:hover {
        color: #666;
      }
    }
  }
}
```

## コンパイル後のCSS

```css:nesting.css
ul {
  margin: 10;
  padding: 10;
}
ul li {
  display: inline-block;
}
ul li a {
  display: block;
  padding: 6px 12px;
}
ul li a:hover {
  color: #666;
}
```

# Mixins
複数のプロパティ宣言を一緒に再利用できるようにする仕組みです。

## Sassの場合

```sass:mixins.sass
=baseButton($bg-color)
  border: 1px solid #333
  background-color: $bg-color
.danger-button
  +baseButton(#ff0000)
```

## Scssの場合

```scss:mixins.scss
@mixin baseButton($bg-color) {
  border: 1px solid #333;
  background-color: $bg-color;
}

.danger-button {
  @include baseButton(#ff0000);
}
```

## コンパイル後のCSS

```css:mixins.css
.danger-button {
  border: 1px solid #333;
  background-color: #ff0000;
}
```

# Extend/Inheritance

いわゆる継承です。

## Sassの場合

```sass:extend.sass
%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

.warning
  @extend %message-shared
  border-color: yellow
```

## Scssの場合

```scss:extend.scss
%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;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}
```

## コンパイル後のCSS

```css:extend.css
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}
```

# Operators
通常のCSSだと四則演算にはcalc()を使いますが、Sassでは使わずに演算ができます。

## Sassの場合

```sass:operators.sass
.container
  width: 100%
  display: flex

article
  width: 600px / 960px * 100%

aside
  width: 300px / 960px * 100%
```

## Scssの場合

```scss:operators.scss
.container {
  width: 100%;
  display: flex;
}

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

aside {
  width: 300px / 960px * 100%;
}
```

## コンパイル後のCSS

```css:operators.css
.container {
  width: 100%;
  display: flex;
}

article {
  width: 62.5%;
}

aside {
  width: 31.25%;
}
```

# Partials/Modules

Sassでは分割したファイルをモジュール化する仕組みがあります。

`_partial.sass`のようにアンダースコアをファイル名のprefixとし、利用したいファイルで、`@use partial`を書きます。
※アンダースコアをつけることで、CSSへのトランスパイル時に、CSSファイルとして出力しないようになります。

## Sassの場合

```sass:_base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
```

```sass:styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white
```

## Scssの場合

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

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

```scss:styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
```

## コンパイル後のCSS

```css:styles.css
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}
```

# コメント

## Sass/Scssの場合

```sass:comment.sass
// JavaScriptのように単一コメントを書くことができます。CSSへは出力されません。

/* CSSと同じコメント記法も当然使用できます */
```

## コンパイル後のCSS

```css:comment.css
/* CSSと同じコメント記法も当然使用できます */
```

---
以上になります。
ぜひ素敵なSassライフをお過ごしください