Sass入門

Sassを使用する前に、プロジェクトにSassを設定する必要があります。ここでブラウズするだけで良い場合はそのまま進めてください。ただし、まずはSassをインストールすることをお勧めします。こちらで、セットアップ方法を学ぶことができます。

プリプロセッシングプリプロセッシングパーマリンク

CSS自体は楽しいかもしれませんが、スタイルシートは大きくなり、複雑になり、保守が難しくなっています。プリプロセッサがここで役立ちます。Sassには、ネスト、ミックスイン、継承など、CSSにはまだ存在しない機能があり、堅牢で保守可能なCSSを作成するのに役立ちます。

Sassを使い始めると、プリプロセスされたSassファイルを通常のCSSファイルとして保存し、ウェブサイトで使用できます。

これを実現する最も直接的な方法は、ターミナルを使用することです。Sassがインストールされたら、`sass`コマンドを使用してSassをCSSにコンパイルできます。Sassにどのファイルからビルドするか、どこにCSSを出力するかを伝える必要があります。たとえば、ターミナルから`sass input.scss output.css`を実行すると、単一のSassファイル`input.scss`を取得し、そのファイルを`output.css`にコンパイルします。

`--watch`フラグを使用して、個々のファイルまたはディレクトリを監視することもできます。watchフラグは、Sassにソースファイルの変更を監視し、Sassを保存するたびにCSSを再コンパイルするように指示します。`input.scss`ファイルを監視する場合（手動でビルドする代わりに）、watchフラグをコマンドに追加するだけです。

sass --watch input.scss output.css

フォルダパスを入力と出力として使用し、コロンで区切ることで、ディレクトリを監視して出力することもできます。この例では

sass --watch app/sass:public/stylesheets

Sassは`app/sass`フォルダ内のすべてのファイルを監視し、CSSを`public/stylesheets`フォルダにコンパイルします。

💡豆知識

Sassには2つの構文があります！SCSS構文（`.scss`）は最も一般的に使用されています。これはCSSのスーパーセットであり、有効なCSSはすべて有効なSCSSでもあります。インデント構文（`.sass`）はあまり一般的ではありません。これは、中括弧ではなくインデントを使用してステートメントをネストし、セミコロンではなく改行を使用してステートメントを区切ります。すべての例は、どちらの構文でも利用できます。

変数変数パーマリンク

変数は、スタイルシート全体で再利用したい情報を保存する方法だと考えてください。色、フォントスタック、または再利用したいと思うCSS値などを保存できます。Sassは`$`記号を使用して変数を作成します。例を以下に示します。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

       プレイグラウンドSass構文$font-stack: Helvetica, sans-serif
$primary-color: #333

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

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

Sassが処理されると、`$font-stack`と`$primary-color`に定義した変数が取得され、変数値が配置された通常のCSSが出力されます。これは、ブランドカラーを使用し、サイト全体で一貫性を維持する場合に非常に強力です。

ネストネストパーマリンク

HTMLを作成するときは、明確なネストされた視覚的な階層があることに気づいたかもしれません。一方、CSSにはありません。

Sassを使用すると、HTMLと同じ視覚的な階層に従う方法でCSSセレクタをネストできます。過度にネストされたルールは、保守が困難になる可能性のある過剰に修飾されたCSSにつながるため、一般的に悪い習慣とみなされます。

それを念頭に置いて、サイトのナビゲーションに関する典型的なスタイルの例を以下に示します。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

       プレイグラウンドSass構文nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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


CSS出力nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

`ul`、`li`、`a`セレクタが`nav`セレクタ内にネストされていることに注意してください。これは、CSSを整理し、読みやすくするのに最適な方法です。

パーシャルパーシャルパーマリンク

他のSassファイルに含めることができる小さなCSSスニペットを含むパーシャルSassファイルを作成できます。これは、CSSをモジュール化し、保守を容易にするのに最適な方法です。パーシャルは、先頭にアンダースコアが付いたSassファイルです。`_partial.scss`のような名前を付けることができます。アンダースコアは、Sassにそのファイルがパーシャルファイルのみであり、CSSファイルに生成されるべきではないことを知らせます。Sassパーシャルは`@use`ルールで使用されます。

モジュールモジュールパーマリンク

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、`@use`をサポートしているのはDart Sassのみです。他の実装を使用しているユーザーは、代わりに`@import`ルールを使用する必要があります。

Sassを単一のファイルにすべて記述する必要はありません。`@use`ルールを使用して、好きなように分割できます。このルールは別のSassファイルをモジュールとして読み込みます。つまり、ファイル名に基づいた名前空間を使用して、Sassファイル内の変数、ミックスイン、および関数を参照できます。ファイルを使用すると、生成されたCSSもコンパイルされた出力に含まれます！

  SCSS

  Sass

  CSS
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;
}
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

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

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

`styles.scss`ファイルで`@use 'base';`を使用していることに注意してください。ファイルを使用する場合は、ファイル拡張子を付ける必要はありません。Sassは賢く、自動的に判別します。

ミックスインミックスインパーマリンク

CSSの中には、特にCSS3と多くのベンダープレフィックスでは、記述するのが少し面倒なものがあります。ミックスインを使用すると、サイト全体で再利用したいCSS宣言のグループを作成できます。Sassを非常にDRYに保つのに役立ちます。値を渡して、ミックスインの柔軟性を高めることもできます。`theme`の例を以下に示します。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}



       プレイグラウンドSass構文@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff

.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)




CSS出力.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

ミックスインを作成するには、`@mixin`ディレクティブを使用して名前を付けます。ミックスインの名前を`theme`にしました。括弧内で変数`$theme`も使用しているので、好きなテーマを渡すことができます。ミックスインを作成したら、`@include`の後にミックスインの名前を付けてCSS宣言として使用できます。

拡張/継承拡張/継承パーマリンク

`@extend`を使用すると、あるセレクタから別のセレクタにCSSプロパティのセットを共有できます。この例では、エラー、警告、成功に関する簡単なメッセージシリーズを、拡張と併用されるもう1つの機能であるプレースホルダークラスを使用して作成します。プレースホルダークラスは、拡張された場合にのみ出力される特殊なクラスであり、コンパイルされたCSSをきれいに保つのに役立ちます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.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;
}

       プレイグラウンドSass構文/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap

.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出力/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

上記のコードは、`.message`、`.success`、`.error`、`.warning`に`%message-shared`と同じように動作するように指示します。つまり、`%message-shared`が表示される場所であれば、`.message`、`.success`、`.error`、`&` `warning`も表示されます。マジックは生成されたCSSで発生し、これらの各クラスは`%message-shared`と同じCSSプロパティを取得します。これにより、HTML要素に複数のクラス名を記述する必要がなくなります。

Sassではプレースホルダークラスに加えて、ほとんどの単純なCSSセレクタを拡張できますが、プレースホルダークラスを使用するのが、スタイルの他の場所にネストされているクラスを拡張していないことを確認する最も簡単な方法であり、これにより、CSSに予期しないセレクタが発生する可能性があります。

`%equal-heights`は拡張されないため、`%equal-heights`内のCSSは生成されません。

演算子演算子パーマリンク

CSSで数学を行うことは非常に役立ちます。Sassには、`+`、`-`、`*`、`math.div()`、`%`などの標準的な算術演算子がいくつかあります。この例では、`article`と`aside`の幅を計算するための簡単な計算を行います。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

       プレイグラウンドSass構文@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto



CSS出力.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

960pxをベースにした非常に単純な流動グリッドを作成しました。Sassの演算を使用すると、ピクセル値を取得してパーセンテージに変換するなどの操作を簡単に実行できます。

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド

Sass入門

プリプロセッシングプリプロセッシング パーマリンク

💡豆知識

変数変数 パーマリンク

SCSS構文

Sass構文

CSS出力

ネストネスト パーマリンク

SCSS構文

Sass構文

CSS出力

パーシャルパーシャル パーマリンク

モジュールモジュール パーマリンク

SCSS構文

Sass構文

CSS出力

ミックスインミックスイン パーマリンク

SCSS構文

Sass構文

CSS出力

拡張/継承拡張/継承 パーマリンク

SCSS構文

Sass構文

CSS出力

演算子演算子 パーマリンク

SCSS構文

Sass構文

CSS出力

プリプロセッシングプリプロセッシングパーマリンク

変数変数パーマリンク

ネストネストパーマリンク

パーシャルパーシャルパーマリンク

モジュールモジュールパーマリンク

ミックスインミックスインパーマリンク

拡張/継承拡張/継承パーマリンク

演算子演算子パーマリンク