サービス ポータル SCSS の基礎

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：8分

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

    SCSS 変数

    SCSS 変数により、スタイル シート全体で再利用する情報を保存できます。再利用する色、フォント スタック、または任意の CSS 値などを保存できます。SCSS は $ 記号を使用して、対象を変数として表します。

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

    • 数字 (単位を含む)
    • 文字列 (引用符あり/なし)
    • 色 (名前)
    • ブール

    変数は、利用可能な関数または mixin の 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) 赤、緑、青、アルファの値から色を作成します。
    red($color) 色の赤コンポーネントを取得します。
    green($color) 色の緑コンポーネントを取得します。
    blue($color) 色の青コンポーネントを取得します。
    mix($color1, $color2, [$weight]) 2 つの色を混ぜ合わせます。

    HSL 関数

    関数 説明 利用できる場所
    hsl($hue, $saturation, $lightness) 色相、彩度、明るさの値から色を作成します。 あり
    hsla($hue, $saturation, $lightness, $alpha) 色相、彩度、明るさ、アルファの値から色を作成します。 あり
    hue($color) 色の色相コンポーネントを取得します。 あり
    彩度（$カラー） 色の彩度コンポーネントを取得します。 あり
    明度（$カラー） 色の明るさコンポーネントを取得します。 あり
    adjust-hue($color, $degrees) 色の色相を変更します。 あり
    lighten($color, $amount) 色をさらに明るくします。 あり
    lighten($color, $amount) 色をさらに暗くします。 あり
    saturate($color, $amount) 色の彩度を増やします。 あり
    desaturate($color, $amount) 色の彩度を減らします。 あり
    grayscale($color) 色をグレースケールに変換します。 あり
    complement($color) 色の補色を返します。 なし
    反転（$カラー） 色の反転を返します。 なし

    不透明度関数

    関数 説明 利用できる場所
    alpha($color) 色のアルファ コンポーネント (不透明度) を取得します。 あり
    opacity($color) 色のアルファ コンポーネント (不透明度) を取得します。 あり
    rgba($color, $alpha) 色のアルファ コンポーネントを変更します。 あり
    opacify($color, $amount) 色の不透明度を増やします。 なし
    fade-in($color, $amount) 色の不透明度を増やします。 なし
    transparentize($color, $amount) 色の透明度を増やします。 なし
    fade-out($color, $amount) 色の透明度を増やします。 なし

    他の色関数

    関数 説明 利用できる場所
    adjust-color() 色の 1 つまたは複数のコンポーネントを増減させます。 あり
    scale-color() 色の 1 つまたは複数のプロパティを流動的に変化させます。 あり
    change-color() 色の 1 つまたは複数のプロパティを変更します。 なし
    ie-hex-str() IE フィルターによって認識されるフォーマットに色を変換します。 なし

    文字列関数

    関数 説明 利用できる場所
    unquote($string) 文字列から引用符を削除します。 あり
    quote($string) 文字列に引用符を追加します。 あり
    str-length($string) 文字列内の文字数を返します。 なし
    str-insert($string, $insert, $index) $index の $string に $insert を挿入します。 なし
    str-index($string, $substring) $string で最初に発生する $substring のインデックスを返します。 なし
    str-slice($string, $start-at, [$end-at]) $string からサブ文字列を抽出します。 なし
    to-upper-case($string) 文字列を大文字に変換します。 なし
    to-lower-case($string) 文字列を小文字に変換します。 なし

    数字関数

    関数 説明 利用できる場所
    percentage($number) 無名数をパーセンテージに変換します。 あり
    round($number) 数字を四捨五入して最も近い整数にします。 あり
    ceil($number) 数字を切り上げて整数にします。 あり
    floor($number) 数字を切り捨てて整数にします。 あり
    abs($number) 数字の絶対値を返します。 あり
    min($numbers…) 複数の数字の中から最小値を見つけます。 あり
    max($numbers…) 複数の数字の中から最大値を見つけます。 あり
    random([$limit]) 乱数を返します。 なし

    リスト関数

    SCSS 内のリストは不変です。すべてのリスト関数は、配置済みの既存のリストを更新するのではなく、新しいリストを返します。

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

    関数 説明
    length($list) リストの長さを返します。
    nth($list, $n) リスト内の特定のアイテムを返します。
    set-nth($list, $n, $value) リスト内の n 番目のアイテムを置換します。
    join($list1, $list2) 2 つのリストを 1 つに結合します。
    append($list1, $val) リストの最後に単一の値を追加します。
    zip($lists…) 複数のリストを単一の多次元リストに統合します。
    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 mixin

    mixin により、サイト全体で再利用する CSS 宣言のグループを作成できます。mixin をより柔軟にするために値を渡すことができます。

    次のコード ブロックは、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 参照」を参照してください。