Arsaga Partners, Inc.

Sass

読み方:さーす

  

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

 

 


.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

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報