この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【Sass】SCSS記法チートシート

SCSS記法とは

SCSS記法とはSassの書き方の1つで、SassにはSCSS記法とSASS記法があり、SCSS記法の方がCSSと互換性があるので使われることが多い。
拡張子は「.scss」にする。

Sassとは

「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと

基本的な書き方

SCSS

div{
  p{
    color: red;
  }
}

ネスト構造系

ネスト構造

入れ子構造(HTMLのような形)に記述

See the Pen Sass_scss_nest by engineerhikaru (@engineerhikaru) on CodePen.

親セレクタ参照

親セレクタの名称を参照し記述

See the Pen Sass_scss_parent-reference by engineerhikaru (@engineerhikaru) on CodePen.

ネームスペースネスト

CSSでネームスペースで記述しているもの(font-familyなど)をネスト構造で記述

See the Pen Sass_scss_namespace-nest by engineerhikaru (@engineerhikaru) on CodePen.

変数系

変数

よく使う値を変数でまとめる

See the Pen Sass_scss_variable by engineerhikaru (@engineerhikaru) on CodePen.

配列変数

よく使う値を配列変数でまとめる

See the Pen Sass_scss_array-variable by engineerhikaru (@engineerhikaru) on CodePen.

グループ変数

よく使うスタイルをまとめる

See the Pen Sass_scss_group-variable by engineerhikaru (@engineerhikaru) on CodePen.

継承系

インポート

分割したSCSSファイルをインポートする

SCSS

// basic.scssというSCSSファイルを読み込む場合
@import "basic";

継承

他の場所で使用したスタイルを継承する

See the Pen Sass_scss_extend by engineerhikaru (@engineerhikaru) on CodePen.

文法

条件分岐

条件によってスタイルを変更する

See the Pen Sass_scss_if-else by engineerhikaru (@engineerhikaru) on CodePen.

繰り返し

スタイルを繰り返す

See the Pen Sass_scss_for by engineerhikaru (@engineerhikaru) on CodePen.

繰り返し(配列変数)

配列変数を使用した繰り返し

See the Pen Sass_scss_foreach by engineerhikaru (@engineerhikaru) on CodePen.

演算・色

四則演算

スタイルの中で演算

See the Pen Sass_scss_calculation by engineerhikaru (@engineerhikaru) on CodePen.

文字列結合

スタイルの中で文字列結合

See the Pen Sass_scss_concatenation by engineerhikaru (@engineerhikaru) on CodePen.

明度の調整

ベースの色の明度を調整

See the Pen Sass_scss_brightness by engineerhikaru (@engineerhikaru) on CodePen.

彩度の調整

ベースの色の彩度を調整

See the Pen vYNVVjr by engineerhikaru (@engineerhikaru) on CodePen.

透明度の調整

ベースの色の透明度を調整

See the Pen Sass_scss_transparency by engineerhikaru (@engineerhikaru) on CodePen.

色相の調整

ベースの色の色相を調整

See the Pen Sass_scss_hue by engineerhikaru (@engineerhikaru) on CodePen.

色の補色&反転

ベースの色の補色or反転にする

See the Pen Sass_scss_inversion by engineerhikaru (@engineerhikaru) on CodePen.

色を混ぜる

ベースの色(2つ)を混ぜる

See the Pen Sass_scss_color-mix by engineerhikaru (@engineerhikaru) on CodePen.

その他

コメントアウト

SCSS

// 1行コメント
/* 
  複数行コメント(コンパイル後も残る)
*/

引用符の付け外し

文字列の引用符("")の付け外し

See the Pen Sass_scss_quote by engineerhikaru (@engineerhikaru) on CodePen.

大文字&小文字化

文字列の大文字or小文字化

See the Pen Sass_scss_upper-case by engineerhikaru (@engineerhikaru) on CodePen.

絶対値を返す

数値の絶対値を返す

See the Pen Sass_scss_abs by engineerhikaru (@engineerhikaru) on CodePen.

切り上げを返す

数値の切り上げを返す

See the Pen Sass_scss_ceil by engineerhikaru (@engineerhikaru) on CodePen.

切り捨てを返す

数値の切り捨てを返す

See the Pen Sass_scss_floor by engineerhikaru (@engineerhikaru) on CodePen.

四捨五入を返す

数値の四捨五入を返す

See the Pen Sass_scss_round by engineerhikaru (@engineerhikaru) on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【Sass】SCSS記法チートシート