Help us understand the problem. What is going on with this article?

SCSS記法チートシート

この内容について

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

engineerhikaru
💻Web制作 / 📱アプリ開発に役立つ情報を発信するアカウントはこちら / システム開発〜Web制作〜アプリ開発を経験
https://korenarawakaru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away