SASS

SASS（Syntactically Awesome Style Sheets）はCSSの拡張言語で、CSSの記述を簡潔にし、保守性や再利用性を向上させることができます。以下にSASSの基本的なチュートリアルを記載します。

インストール[編集]

まずはじめに、SASSを使うためにはコンパイルが必要です。SASSファイルをCSSファイルに変換するためには、SASSのコマンドラインツールをインストールする必要があります。

SASSのインストール方法については、SASS公式サイトを参照してください。

変数[編集]

SASSでは、変数を使ってスタイルを記述することができます。変数を定義するには、$を変数名の前につけます。

$primary-color: #007bff;

$primary-colorという変数に#007bffという値を代入しています。変数はCSSのどこでも使うことができます。

nav {
  background-color: $primary-color;
}

nav要素の背景色に$primary-colorという変数を使っています。

ネスト[編集]

SASSでは、ネスト構造を使ってCSSを記述することができます。例えば、下記のようなCSSがあるとします。

nest-sample.css

nav {
  background-color: #007bff;
}

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

nav ul li {
  display: inline-block;
}

nav a {
  color: white;
  text-decoration: none;
}

これをSASSで記述すると、下記のようになります。

nest-sample.scss

nav {
  background-color: #007bff;

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

    li {
      display: inline-block;
    }

    a {
      color: white;
      text-decoration: none;
    }
  }
}

nav要素の中にあるul、li、a要素のスタイルを、ネスト構造で簡潔に記述しています。

SCSS記法とSASS記法[編集]

SCSS記法とSASS記法は、どちらもCSSの拡張言語であり、同じ言語でありながら構文が異なります。

SCSS記法は、CSSと似た構文を持ち、中括弧（{}）やセミコロン（;）などの一般的なCSSの構文を使用します。また、変数や関数、条件分岐、ループなどのプログラミング言語のような機能を使用することができます。

例えば、以下はSCSSの変数を使用した例です。

nest-sample.scss

$primary-color: #007bff;

.nav {
  display: flex;
  li {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
    a {
      color: $primary-color;
    }
  }
}

一方、SASS記法は、インデントによって階層を表現し、中括弧やセミコロンを使用しません。

例えば、以下はSASS記法の例です。

nest-sample.sass

$primary-color: #007bff

.nav
  display: flex
  li
    margin-right: 10px
    &:last-child
      margin-right: 0
      a
        color: $primary-color

どちらの記法も、CSSを拡張するための強力な機能を提供し、個人の好みに応じて選択することができます。

ミックスイン[編集]

SASSでは、ミックスインという機能を使って、再利用可能なスタイルを定義することができます。ミックスインは、@mixinを使って定義します。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

@mixinでborder-radiusというミックスインを定義しています。このミックスインは、引数として半径を与え各種プリフィックスのついたborder-radius関連のプロパティを出力します。