SCSS記法チートシート

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【Sass】SCSS記法チートシート](https://korenarawakaru.com/tech/sass/scss-cheatsheet)

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

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

## 基本的な書き方

```scss:SCSS
div{
  p{
    color: red;
  }
}
```

## ネスト構造系
### ネスト構造
入れ子構造(HTMLのような形)に記述
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="OJyBEMo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_nest">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyBEMo">
  Sass_scss_nest</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 親セレクタ参照
親セレクタの名称を参照し記述
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="QWjZVBV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_parent-reference">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWjZVBV">
  Sass_scss_parent-reference</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ネームスペースネスト
CSSでネームスペースで記述しているもの(font-familyなど)をネスト構造で記述
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="wvKYEEm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_namespace-nest">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKYEEm">
  Sass_scss_namespace-nest</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 変数系
### 変数
よく使う値を変数でまとめる
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="bGVmxmK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmxmK">
  Sass_scss_variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 配列変数
よく使う値を配列変数でまとめる
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="LYpgJXZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_array-variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpgJXZ">
  Sass_scss_array-variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### グループ変数
よく使うスタイルをまとめる
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="rNOqZPB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_group-variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/rNOqZPB">
  Sass_scss_group-variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

### 継承
他の場所で使用したスタイルを継承する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="oNjaPVY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_extend">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/oNjaPVY">
  Sass_scss_extend</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 文法
### 条件分岐
条件によってスタイルを変更する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="YzyJOMV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_if-else">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyJOMV">
  Sass_scss_if-else</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 繰り返し
スタイルを繰り返す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="ZEbqMZg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_for">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ZEbqMZg">
  Sass_scss_for</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 繰り返し(配列変数)
配列変数を使用した繰り返し
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="YzyJOoQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_foreach">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyJOoQ">
  Sass_scss_foreach</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 演算・色
### 四則演算
スタイルの中で演算
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="YzyJJzx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_calculation">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyJJzx">
  Sass_scss_calculation</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 文字列結合
スタイルの中で文字列結合
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="mdezzmK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_concatenation">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/mdezzmK">
  Sass_scss_concatenation</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 明度の調整
ベースの色の明度を調整
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="LYpggdO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_brightness">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpggdO">
  Sass_scss_brightness</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 彩度の調整
ベースの色の彩度を調整
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="vYNVVjr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vYNVVjr">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/vYNVVjr">
  vYNVVjr</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 透明度の調整
ベースの色の透明度を調整
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="oNjaayE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_transparency">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/oNjaayE">
  Sass_scss_transparency</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 色相の調整
ベースの色の色相を調整
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="jObeevE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_hue">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/jObeevE">
  Sass_scss_hue</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 色の補色&反転
ベースの色の補色or反転にする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="MWaPPPe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_inversion">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaPPPe">
  Sass_scss_inversion</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 色を混ぜる
ベースの色(2つ)を混ぜる
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="Baoqqqe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_color-mix">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/Baoqqqe">
  Sass_scss_color-mix</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## その他
### コメントアウト

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

### 引用符の付け外し
文字列の引用符("")の付け外し
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="XWmxxoM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_quote">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/XWmxxoM">
  Sass_scss_quote</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 大文字&小文字化
文字列の大文字or小文字化
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="oNjaaVd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_upper-case">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/oNjaaVd">
  Sass_scss_upper-case</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 絶対値を返す
数値の絶対値を返す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="VwvEENB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_abs">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvEENB">
  Sass_scss_abs</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 切り上げを返す
数値の切り上げを返す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="OJyBBYe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_ceil">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyBBYe">
  Sass_scss_ceil</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 切り捨てを返す
数値の切り捨てを返す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="VwvEEJG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_floor">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvEEJG">
  Sass_scss_floor</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 四捨五入を返す
数値の四捨五入を返す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="yLYRRma" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sass_scss_round">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/yLYRRma">
  Sass_scss_round</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【Sass】SCSS記法チートシート](https://korenarawakaru.com/tech/sass/scss-cheatsheet)