サービスポータル SCSS の入門

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：8分

    • SCSS は Syntactically Awesome StyleSheets (Sass) 仕様のサブセットであり、CSS の拡張です。すべての有効な CSS スタイルシートは有効な SCSS です。

    SCSS 変数

    SCSS 変数は、スタイルシート全体で再利用する情報を格納する方法です。色、フォントスタック、または再利用したいと思われる CSS 値などを保存できます。SCSS は $ 記号を使用して何かを変数にします。

    SCSS は、次のデータタイプをサポートしています。

    • 数値 (単位を含む)
    • 文字列 (引用符付きまたは引用符なし)
    • 色 (名前、または名前)
    • ブール

    変数は、いくつかの利用可能な関数やミックスインの 1 つに対する引数または結果にすることもできます。翻訳中に、変数の値が出力 CSS ドキュメントに挿入されます。

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

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

    Sass の詳細については、 Sass/SCSS リファレンスを参照してください。

    SCSS 機能

    サービスポータル SCSS コンパイラの関数のリスト。

    RGB機能

    関数 説明
    rgb($red、$green、$blue) 赤、緑、青の値から色を作成します。
    rgba($red、$green、$blue、$alpha) 赤、緑、青、アルファの値から色を作成します。
    赤 ($color) 色の赤色成分を取得します。
    緑 ($color) 色の緑のコンポーネントを取得します。
    青 ($color) 色の青成分を取得します。
    mix($color 1, $color 2, [$weight]) 2 色を混ぜ合わせます。

    HSL 関数

    関数 説明 可用性
    hsl($hue、$saturation、$lightness) 色相、彩度、明度の値から色を作成します。 はい
    hsla($hue、$saturation、$lightness、$alpha) 色相、彩度、明度、アルファ値から色を作成します。 はい
    色相 ($color) 色の色相コンポーネントを取得します。 はい
    彩度 ($color) 色の彩度成分を取得します。 はい
    明るさ($color) 色の明度コンポーネントを取得します。 はい
    adjust-hue($color, $degrees) 色の色相を変更します。 はい
    lighten($color、$amount) 色を明るくします。 はい
    暗くする ($color、$amount) 色を暗くします。 はい
    飽和 ($color, $amount) 色の彩度を高めます。 はい
    彩度を下げる ($color, $amount) 色の彩度を下げます。 はい
    グレースケール ($color) 色をグレースケールに変換します。 はい
    補数 ($color) 色の補色を返します。 いいえ
    反転 ($color) 色の逆を返します。 いいえ

    不透明度関数

    関数 説明 可用性
    アルファ ($color) 色のアルファコンポーネント (不透明度) を取得します。 はい
    不透明度 ($color) 色のアルファコンポーネント (不透明度) を取得します。 はい
    rgba($color、$alpha) 色のアルファコンポーネントを変更します。 はい
    不透明化 ($color、$amount) 色をより不透明にします。 いいえ
    フェードイン ($color、$amount) 色をより不透明にします。 いいえ
    透明化 ($color, $amount) 色の透明度を高めます。 いいえ
    fade-out($color, $amount) 色の透明度を高めます。 いいえ

    その他の色関数

    関数 説明 可用性
    adjust-color() 色の 1 つ以上のコンポーネントを増減します。 はい
    scale-color() 色の 1 つ以上のプロパティを流動的にスケーリングします。 はい
    change-color() 色の 1 つ以上のプロパティを変更します。 いいえ
    ie-hex-str() 色を IE フィルターで認識できる形式に変換します。 いいえ

    文字列関数

    関数 説明 可用性
    引用符なし ($string) 文字列から引用符を削除します。 はい
    見積もり ($string) 引用符を文字列に追加します。 はい
    str-length($string) 文字列内の文字数を返します。 いいえ
    str-insert($string, $insert, $index) $indexで$insertを$stringに挿入します。 いいえ
    str-index($string, $substring) $stringで最初に$substringが発生したインデックスを返します。 いいえ
    str-slice($string, $start-at, [$end-at]) $stringからサブ文字列を抽出します。 いいえ
    to-upper-case($string) 文字列を大文字に変換します。 いいえ
    to-lowercase($string) 文字列を小文字に変換します。 いいえ

    数値関数

    関数 説明 可用性
    パーセンテージ ($number) 単位なしの数値をパーセンテージに変換します。 はい
    ラウンド ($number) 数値を最も近い整数に丸めます。 はい
    ceil($number) 数値を次の整数に切り上げます。 はい
    フロア ($number) 数値を前の整数に切り下げます。 はい
    abs($number) 数値の絶対値を返します。 はい
    min($numbers...) 複数の数値の最小値を検索します。 はい
    最大 ($numbers...) 複数の数値の最大値を求めます。 はい
    ランダム ([$limit]) 乱数を返します。 いいえ

    リスト関数

    SCSS のリストは変更できません。すべてのリスト関数は、既存のリストをその場で更新するのではなく、新しいリストを返します。

    すべてのリスト関数はマップに対しても機能し、それらをペアのリストとして扱います。

    関数 説明
    長さ ($list) リストの長さを返します。
    nth($list、$n) リスト内の特定のアイテムを返します。
    set-nth($list, $n, $value) リスト内の n 番目のアイテムを置き換えます。
    join($list 1、$list 2) 2 つのリストを 1 つに結合します。
    append($list 1, $val) リストの最後に単一の値を追加します。
    郵便番号 ($lists...) 複数のリストを 1 つの多次元リストに結合します。
    index($list, $value) リスト内の値の位置を返します。
    list-separator($list) リストのセパレーターを返します。

    カスタム関数の追加

    scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }

    SCSS ネスト

    SCSS を使用すると、HTML と同じ視覚的階層に従う方法で CSS セレクターをネストできます。

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
    ul、li、および a セレクターは nav セレクター内にネストされているため、CSS を整理して読みやすくするのに最適な方法です。ウィジェットがレンダリングされると、生成される 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;
}

    Sass の詳細については、 Sass/SCSS リファレンスを参照してください。

    SCSS 演算子

    SCSS には、+、-、*、/、% などの標準的な数学演算子がいくつかあります。

    簡単な計算 を使用して、余 談記事の幅を計算します。例：
    .container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
    生成された CSS は次のようになります。
    .container {
  width: 100%;
}

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

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

    Sass の詳細については、 Sass/SCSS リファレンスを参照してください。

    SCSS ミックスイン

    ミックスインを使用すると、サイト全体で再利用する CSS 宣言のグループを作成できます。値を渡して、ミックスインをより柔軟にすることができます。

    次のコードブロックは、border-radius の例です。
    @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
    生成された CSS は次のようになります。 
    .box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

    Sass の詳細については、 Sass/SCSS リファレンスを参照してください。