はじめに

普段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拡張言語です。(訳)

※公式サイトより引用

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

変数

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

Sassの場合

variable.sass

$font-default: Helvetica, sans-serif
$text-color: #111

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

Scssの場合

variable.scss

$font-default: Helvetica, sans-serif;
$text-color: #111;

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

コンパイル後のCSS

variable.css

body {
  font-family: Helvetica, sans-serif;
  color: #111;
}

ネスト

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

Sassの場合

nesting.sass

ul
  margin: 10
  padding: 10

  li
    display: inline-block

    a
      display: block
      padding: 6px 12px

      &:hover
        color: #666

Scssの場合

nesting.scss

ul {
  margin: 10;
  padding: 10;

  li {
    display: inline-block;

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

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

コンパイル後の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の場合

mixins.sass

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

Scssの場合

mixins.scss

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

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

コンパイル後のCSS

mixins.css

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

Extend/Inheritance

いわゆる継承です。

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の場合

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

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の場合

operators.sass

.container
  width: 100%
  display: flex

article
  width: 600px / 960px * 100%

aside
  width: 300px / 960px * 100%

Scssの場合

operators.scss

.container {
  width: 100%;
  display: flex;
}

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

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

コンパイル後の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の場合

_base.sass

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

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

styles.sass

@use 'base'

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

Scssの場合

_base.scss

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

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

styles.scss

@use 'base';

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

コンパイル後のCSS

styles.css

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

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

コメント

Sass/Scssの場合

comment.sass

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

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

コンパイル後のCSS

comment.css

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

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