Arsaga Partners, Inc.

NEWS

ニュース

NEWS

ニュース

Sassとは

2021.04.27

  • DX技術用語辞典
  

Sassとは<読み方 :サース>

Syntactically Awesome StyleSheetの略で、日本語で「文法的に素晴らしいスタイルシート」の事。CSSをより効率的に書けるようにした言語(メタ言語)になる。SassはプログラムっぽくCSSを書くのでコーディング効率やソースコードの保守性が上がる。

Sassの特徴

  • 入れ子にできる。ボタンの中のテキストのサイズを書く場合、普通のCSSだと毎回.btn(親クラス)をつける必要があるがSassなら.btn(親クラス)の記述は1回で済む
  • .btn { :
    width: 200px; :
    } :
    .btn .text { :
    font-size: 12px;
    }

    .btn { :
    width: 200px; :
    text { :
    font-size: 12px;
    } :
    }

    • 変数が使える。テキストの色や背景色を後から一括で修正する事ができる
    • .text { :
      color: #121212; :
      }

      $primary-black:#121212:
      .text { :
      color:$primary-black;
      }

      歴史

      2006年:Sassが初公開。当時はHamlというHTMLをシンプルに書く事のできる仕様になっていてCSSとの互換性がなかったため導入のハードルが高かった。
      2013年:CSSと似た記法で記述できる、SCSS記法。
      CSSと完全互換になり、一気に普及した。

      豆知識

      アンパサンド(&)を使用する事で擬似クラスや親要素を参照する事ができる。
      .btn { :
      background-color: blue;
      } :
      .btn:hover { :
      background-color: red;:
      }


      .btn { :
      background-color: blue;:
      &:hover { :
      background-color: red;
      }

      ◆執筆・監修:
      アルサーガパートナーズ株式会社 DX技術用語集制作チーム フロントdivision

      アルサーガパートナーズは、ITサービスの開発に必要な組織を全て備えた、営業部隊のいないIT開発集団です。

      お問い合わせはこちら