Sassの記法(SCSS構文)

scssファイルの拡張子は.scssです。
SCSSのCSSへのコンパイルについては[Web制作向けnpm-scripts](https://qiita.com/takeshisakuma/items/dbbb1c465099e6e4dd2e) をご参照ください。

※Compassは個人的に使用していないので扱いません。

## output-style
SCSSをコンパイルしてCSSにした場合の形式は4種類あります。

### 元になるSCSS

```:scss
section {
  background-color: white;
 
  h1 {
    background-color: black;
    color: white;
  }
}
``` 


#### output-style:nested

```:css
section {
  background-color: white; }
  section h1 {
    background-color: black;
    color: white; }
```


#### output-style:expanded

```:css
section {
  background-color: white;
}

section h1 {
  background-color: black;
  color: white;
}
``` 


#### output-style:compact

```:css
section { background-color: white; }
 
section h1 { background-color: black; color: white; }
``` 

### output-style:compressed

```:css
section { background-color: white; }section h1 { background-color: black; color: white; }
```














## ネスト
CSSの継承をネストでまとめられます。

```:scss
div {
  background-color: gray;
 
  p {
    padding: 20px;
 
    span {
      color: red;
    }
 
  }
 
}
```

↓コンパイル

```:css
div {
  background-color: gray;
}
 
div p {
  padding: 20px;
}
 
div p span {
  color: red;
}
``` 

### 子セレクタ、隣接セレクタのネスト

```:scss
main {
 
  section {
    padding: 40px;
 
    +section {
      margin-top: 40px;
    }
 
    >h1 {
      font-size: 26px;
      font-weight: bold;
    }
 
  }
 
}
```
  
↓コンパイル

```:css
main section {
  padding: 40px;
}
 
main section+section {
  margin-top: 40px;
}
 
main section>h1 {
  font-size: 26px;
  font-weight: bold;
}
``` 

### mediaのネスト

```:scss
section {
  margin: 0 auto;
  width: 1200px;
 
  @media screen and (max-width:640px) {
    width: 100%;
  }
}
```

↓コンパイル

```:css
section {
  margin: 0 auto;
  width: 1200px;
}
 
@media screen and (max-width: 640px) {
  section {
    width: 100%;
  }
}
``` 










## &記号(アンパサンド)

### 疑似クラス

```:scss
.child {
  color: red;
  
  &:hover {
    color: blue;
  }
      
}
```

↓コンパイル

```:css
.child {
  color: red;
}
 
.child:hover {
  color: blue;
}
``` 



### 疑似要素

```:scss
.child {
  color: red;
  
  &::after {
    color: blue;
  }
      
}
```

↓コンパイル

```:css
.child {
  color: red;
}
 
.child::after {
  color: blue;
}
``` 


### 複数クラス

```:scss
.child {
  color: red;
  
  &.brother {
    color: blue;
  }
      
}
```

↓コンパイル

```:css
.child {
  color: red;
}
 
.child.brother {
  color: blue;
}
``` 



### 親要素指定

```:sass
.child {
  color: red;
 
  .parent & {
    color: blue;
  }
     
}
```
 
↓コンパイル

```:css
.child {
  color: red;
}
 
.parent .child {
  color: blue;
}
``` 

### クラス名変更

```:scss
.child {
  color: red;
 
  &__modifed {
    color: blue;
  }
     
}
```
 
↓コンパイル

```:css
.child {
  color: red;
}
 
.child__modifed {
  color: blue;
}
``` 

### ふくろうセレクタ

```:scss
.child {
  color: red;
 
  &+& {
    color: blue;
  }
 
}
```
 
↓コンパイル

```:css
.child {
  color: red;
}
 
.child+.child {
  color: blue;
}
``` 



























## コメント


### scssのみのコメント

```:sass
// コメント 
```

### scssだけでなくcssにも残すコメント
コンパイル形式がcompressedのときはcssには残りません。

```:scss
/* コメント */
```

### scssだけでなくcssにも残すコメント
コンパイル形式がcompressedのときもcssに残ります。

```:scss
/*! コメント */
```






## 演算

```:sass
$boxHeight: 400px;

.box {
    width: 200px + 200;
    height: $boxHeight / 4;
}
```
↓コンパイル

```:css
.box {
  width: 400px;
  height: 100px; 
}
```

























## 変数
よく使う値をあらかじめ変数化しておくと、変更時に一括で変更できます。
色、フォントなどに便利です。

### 変数名のハイフンとアンダースコア
変数名に含まれるハイフン (-) と、アンダースコア (_) は同じものとして扱われます。
例：$main-color という名前で定義した変数は、$main_color という名前でも参照できます。
(Mixin の名前や関数の名前でも同様)

```:scss
/* 変数設定 */
$width:500px;
$color:#aa443f;
 
/* 変数の使用 */
#maincontainer{
  width:$width;
  color:$color;
}
```

#### !default
変数にデフォルト値を割り当てます。
(変数が定義されてないか値が null の場合に値が有効になります)

```:scss
$boxRadius:10px !default;
 
.box1 {
  $boxRadius: 20px;
  width: 100px;
  border-radius: $boxRadius;
}
 
.box2 {
  width: 100px;
  border-radius: $boxRadius;
}
```

↓コンパイル

```:css
.box1 {
  width: 100px;
  border-radius: 20px; 
}
 
.box2 {
  width: 100px;
  border-radius: 10px; 
}
```



#### 変数のデータタイプの判別

|sassのデータ型|意味|
|---|---|
|Number型|数値|
|Color型|色|
|String型|文字列|
|Boolean型|真偽|
|List型|リスト|
|Null型|空|


```:scss
$caution:red;
 
.dataType {
  content: quote("$cautionColorのデータ型は"+type-of($caution));
}
```

↓コンパイル

```:css
.dataType {
  content: "$cautionColorのデータ型はcolor"; 
}
```









## 関数

### 関数の自作
自分の好きな関数を定義できます。

```:scss
@function 自作関数名($引数){
  @return 戻り値;
}
``` 


```:sass
@function Double($value) {
  @return round($value * 2);
}
 
.box{
  width: Double(300px);
}
```


### 数値系
#### abs()
数値の絶対値を取得します。

```:scss
$value:-15px;
 
.box {
  margin: abs($value);
}
```
 
↓コンパイル

```:css
.box {
  margin: 15px;
}
``` 

#### round()
数値の小数点以下を四捨五入します。

```:scss
$value:15.4px;
 
.box {
  margin: round($value);
}
```
 
↓コンパイル

```:css
.box {
  margin: 15px;
}
``` 

#### ceil()
数値の小数点以下を切り上げます。

```:scss
$value:15.1px;
 
.box {
  margin: ceil($value);
}
```
 
↓コンパイル

```:css
.box {
  margin: 16px;
}
``` 

#### floor()
数値の小数点以下を切り捨てます。

```:scss
$value:15.9px;
 
.box {
   margin: floor($value);
}
```
 
↓コンパイル

```:css
.box {
  margin: 15px;
}
``` 
 

### 色系
#### rgba()
色に加えて透明度を指定してRGBA形式に変換します。

```:scss
.box {
  background-color: rgba(red, .3);
}
```

↓コンパイル

```:css
.box {
  background-color: rgba(255, 0, 0, 0.3);
}
``` 

#### lighten()
色を明るくします。

```:scss
.box {
  background-color: lighten(red, 20%);
}
```
  
↓コンパイル

```:css
.box {
  background-color: #ff6666;
}
```

#### darken()
色を暗くします。

```:scss
.box {
  background-color: darken(red, 20%);
}
```

↓コンパイル

```:css
.box {
  background-color: #990000;
}
``` 


#### mix()
2種類の色の間の色を抽出します。

```:scss
.box {
  background-color: mix(red, blue, 50%);
}
```
 
↓コンパイル

```:css
.box {
  background-color: purple;
}
```


#### saturate
彩度を上げます。

```:scss
.box {
  background-color: saturate(gray, 50%);
}
```
 
↓コンパイル

```:css
.box {
  background-color: #c04141;
}
``` 

#### desaturate
彩度を下げます。

```:scss
.box {
  background-color: desaturate(red, 50%);
}
```
 
↓コンパイル

```:css
.box {
  background-color: #bf4040;
}
``` 

#### adjust-hue
色相の変更ができます。

```:scss
.box {
  background-color: adjust-hue(red, 180deg);
}
```

↓コンパイル

```:css
.box {
  background-color: cyan;
}
``` 


#### invert
色の反転を行います。

```:scss
.box {
  background-color: invert(red);
}
```
 
↓コンパイル

```:css
.box {
  background-color: cyan;
}
``` 

#### grayscale
グレースケール化します。

```:scss
.box {
  background-color: grayscale(red);
}
```
 
↓コンパイル

```:css
.box {
  background-color: gray;
}
```

#### complement
補色に変更します。

```:scss
.box {
  background-color: complement(red);
}
```
 
↓コンパイル

```:css
.box {
  background-color: cyan;
}
``` 

### 他
#### nth()
指定したN番目の値を取得します。

```:scss
$lists:"red","blue","yellow";
 
.box {
  background-color: nth($lists, 2);
}
```
 
↓コンパイル

```:css
.box {
  background-color: "blue";
}
``` 
 













## インターポレーション (#{})


### 変数を通常使えないところで使う

```:sass
$img_directory:"/img/bg/";

.box {
    background-image: url("#{$img_directory}background_box.jpg");
}
```
 
↓コンパイル

```:css
.box {
  background-image: url("/img/bg/background_box.jpg");
}
```

### 演算しない

```:scss
$value1:500px;
$value2:200px;
 
.box {
  width: #{$value1} - #{$value2};
}
```
↓コンパイル

```:css
.box {
  width: 500px - 200px;
}
```




### 演算できない場所で演算する

```:scss
@for $value from 1 to 5 {
  .mt_#{$value * 10} {
    margin-top: $value * 10;
  }
}
```
 
↓コンパイル

```:css
.mt_10 {
  margin-top: 10;
}

.mt_20 {
  margin-top: 20;
}

.mt_30 {
  margin-top: 30;
}

.mt_40 {
  margin-top: 40;
}
```


### アンクォート
""を無くすことができます。

```:scss
$color:"red";
 
.box {
  background-color: #{$color};
}
```

↓コンパイル

```:css
.box {
  background-color: red;
}
``` 






















## mixinとextend


### mixin
mixinを使用することで引数を使用可能です。
mixinでスタイルを定義して、includeで呼び出します。

```:scss
//mixin作成
@mixin box {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
}

 
//mixin使用
.box--large {
 
  //mixinの使用
  @include box;
     
  //mixinのスタイルの上書き
  width: 200px;
}
```

↓コンパイル

```:css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 100px;
  height: 100px;
  width: 200px;
}
```


### 引数を使ったmixin

```:scss
//引数を使ったmixinの作成
@mixin box($width, $height) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}
 
//mixinの使用
.box--large {
  //mixin使用時に値を代入
  @include box(200px, 200px);
}
```

↓コンパイル

```:css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}
``` 


### 引数に初期値を設定する

```:scss
//引数を使ったmixinの作成
@mixin box($width:200px, $height:200px) {
  background-color: red;
  color: white;
  padding: 20px;
  width: $width;
  height: $height;
}
 
//mixinの使用
.box--large {
  //mixinの使用　()は省略可能
  @include box();
}
```
 
↓コンパイル

```:css
.box--large {
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 200px;
}
``` 


### mixinのスコープ
ルールセット内で書くとその中でしか利用できなくなります。

```:scss
.parent {
  @mixin box {
    background-color: red;
    width: 200px;
    height: 200px;
   }
 
   .child {
     //スコープ内なのでコンパイルできる
     @include box;
   }
}
 
.others {
  //スコープ外なのでmixinが参照できずエラーになる
  @include box;
}
``` 

### mixinにコンテントブロックを渡す

```:scss
@mixin border {
  .parent & {
    @content;
  }
}
 
.child {
  .grandChild {
 
    @include border {
      border: 1px solid black;
    }
 
  }
 
}
```

↓コンパイル

```:css
.parent .child .grandChild {
  border: 1px solid black;
}
``` 




### extend
指定したセレクタのスタイルを継承します。
子孫セレクタ、子セレクタ、隣接セレクタなど複数のパターンで成り立つセレクタには使えません。
※media内ではextendは使用できません。

#### extend用のクラス

```:sass
//extend用のクラス作成
.button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}
 
//extendの使用
.button--link {
 
  //buttonクラスを継承
  @extend .button;
 
  //buttonクラスのスタイルの上書き
  background-color: blue;
 
  //スタイルの追加
  font-weight: bold;
}
```

↓コンパイル

```:css
.button, .button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }
 
.button--link { background-color: blue; font-weight: bold; }
```

### extend用のクラスをcssには展開しない場合
.を%に変えると、展開しません。

```:scss
%button {
  background-color: red;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}
 
.button--link {
  //buttonクラスを継承
  @extend %button;
 
  //buttonクラスのスタイルの上書き
  background-color: blue;
 
  //スタイルの追加
  font-weight: bold;
}
```
 
↓コンパイル

```:css
.button--link { background-color: red; border-radius: 4px; font-size: 16px; padding: 10px 20px; }
 
.button--link { background-color: blue; font-weight: bold; }
```














## メディアクエリ



### ブレイクポイントの変数化

```:scss
$breakpointMaxSP: 640px;
$breakpointMinTAB: $breakpointMaxSP+1;
$breakpointMaxTAB: 980px;
$breakpointMinPC: $breakpointMaxTAB+1;
``` 

### mixin作成

```:scss
@mixin maxScreen($breakPoint) {
  @media screen and (max-width: $breakPoint) {
    @content;
  }
} 
 
@mixin minScreen($breakPoint) {
  @media screen and (min-width: $breakPoint) {
    @content;
  }
}
 
@mixin minMaxScreen($minBreakPoint, $maxBreakPoint) {
  @media screen and (min-width: $minBreakPoint) and (max-width: $maxBreakPoint) {
    @content;
  }
}
``` 

### mixin使用

```:scss
.box {
 
  @include maxScreen($breakpointMaxSP) {
    font-size: 16px;
  }
 
  @include minMaxScreen($breakpointMinTAB, $breakpointMaxTAB) {
    font-size: 18px;
  }
 
  @include minScreen($breakpointMinPC) {
    font-size: 20px;
  }
 
}
```

↓コンパイル

```:css
@media screen and (max-width: 640px) {
  .box {
    font-size: 16px;
  }
}
 
@media screen and (min-width: 641px) and (max-width: 980px) {
  .box {
    font-size: 18px;
  }
}
 
@media screen and (min-width: 981px) {
  .box {
    font-size: 20px;
  }
}
```
















## 制御構文
### each

配列の要素に対して繰り返し処理を実行する

```:scss
@each $変数名 in リスト{
  //スタイルなど
 }
```

```:scss
$boxList: box1,box2,box3,box4;
 
@each $box in $boxList {
 
  .body-#{$box} {
    background-image: url(/img/bgimg_#{$box}.jpg);
  }
     
}
```

↓コンパイル

```:css
.body-box1 {
  background-image: url(/img/bgimg_box1.jpg); }
 
.body-box2 {
  background-image: url(/img/bgimg_box2.jpg); }
 
.body-box3 {
  background-image: url(/img/bgimg_box3.jpg); }
 
.body-box4 {
  background-image: url(/img/bgimg_box4.jpg); }
``` 


### if
条件分岐

```:scss
$isSubpage:true;
 
@if $isSubpage {
  .box {
    background-color: red;
  }
}
```

↓コンパイル

```:css
.box {
  background-color: red;
}
```

```:scss
$pageType:1;
 
@mixin boxBackgroundColor {
  @if $pageType==1 {
    background-color: red;
  }
 
  @else if $pageType==2 {
    background-color: blue;
  }
 
  @else {
    background-color: gray;
  }

}
 
.box {
  @include boxBackgroundColor;
}
```

↓コンパイル

```:css
.box {
  background-color: red;
}
```


|ifで使える比較演算子|意味|
|---|---|
|A==B|AとBが同じ|
|A>B|AはBより大きい|
|A<B|AはBより小さい|
|A>=B|AはB以上|
|A<=B|AはB以下|
|A!=B|AとBは等しくない|

|ifで使える論理演算子|意味|
|---|---|
|and|かつ|
|or|または|
|not|否定|



### while

forより複雑な繰り返し処理を行えます。

```:scss
@while 繰り返しを継続する条件 {
  //スタイルなど
  //繰り返し方法を指定
}

```:scss
$value:100;

@while $value>0 {
  .mt#{$value} {
    margin-top: $value;
  }

  $value:$value - 10;
}
```
 
↓コンパイル

```:css
.mt100 {
  margin-top: 100; }
 
.mt90 {
  margin-top: 90; }
 
.mt80 {
  margin-top: 80; }

.mt70 {
  margin-top: 70; }

.mt60 {
  margin-top: 60; }

.mt50 {
  margin-top: 50; }

.mt40 {
  margin-top: 40; }

.mt30 {
  margin-top: 30; }

.mt20 {
  margin-top: 20; }

.mt10 {
  margin-top: 10; }
``` 


### for
繰り返し処理を行えます。

#### for～through
throughは終了の数値を含みます。

```:scss
@for $変数名 from 開始の数値 through 終了の数値{
  //スタイルなど
}
```

```:scss
@for $value from 1 through 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
   }
}
```

↓コンパイル

```:css
.box_1 {
  margin-bottom: 50px;
}
 
.box_2 {
  margin-bottom: 100px;
}
 
.box_3 {
  margin-bottom: 150px;
}
 
.box_4 {
  margin-bottom: 200px;
}
 
.box_5 {
  margin-bottom: 250px;
}
``` 


#### for～to
toは終了の数値を含みません。

```:scss
@for $変数名 from 開始の数値 to 終了の数値{
  //スタイルなど
}
```

```:scss
@for $value from 1 to 5 {
  .box_#{$value} {
    margin-bottom: 50px * $value;
  }
}
```
 
↓コンパイル

```:css
.box_1 {
  margin-bottom: 50px;
}
 
.box_2 {
  margin-bottom: 100px;
}
 
.box_3 {
  margin-bottom: 150px;
}
 
.box_4 {
  margin-bottom: 200px;
}
``` 











## デバッグ
CSSには何も出力せずに、Terminalに値を出力できます。


### debug

```:scss
// src/scss/style.scssの1行目に書いた場合
@debug "debug test";
```
↓コンパイル

```:terminal
src/scss/style.scss:1 DEBUG: debug test
```

### warn

```:scss
// src/scss/style.scssの1行目に書いた場合
@warn "debug test";
``` 
↓コンパイル

```:terminal
WARNING: debug test
         on line 1 of src/scss/style.scss
```




## モジュールシステム
他の.scssファイルの内容を読み込む機能です。
_で始まるSCSSファイルは個別のCSSファイルを生成しません。(パーシャル)

### import

将来的に廃止予定です。

名前空間を持ちません(グローバル)
(変数、関数、mixinはどのファイルからもアクセスできる)
↓
依存モジュールの把握が困難です。

```:css

// _button.scssファイルをインポート
@import "_button.scss"; 

// _button.scssファイルをインポート(拡張子省略)
@import "_button";

 //複数scssファイルのインポート(拡張子省略)
@import "_button","_box","_text";

//glob(objectフォルダの中のscssを全てインポート)
@import "object/*.scss"
```




### use
importを置き換える機能です。
ファイル単位で名前空間を持ちます
(変数、関数、mixinは読み込んだファイル内でしかアクセスできません)
↓
依存モジュールの把握が容易です。

|種類|書き方|
|---|---|
|変数|```<namespace>.<variable>``` |
|関数|```<namespace>.<function>``` |
|mixin|```<namespace>.<mixin>```|


#### importの挙動(useとの比較用ファイル)]

|サンプルファイル|内容|
|---|---|
|main.scss|_var.scssと_sub.scssを読む|
|_var.scs|変数を定義|
|_sub.scss|_var.scssで定義した変数を使う|


```:main.scss
@import "var";
@import "sub";
```

```:_var.scss
$mainColor:"red";
```

```:_sub.scss
html {
  background-color: $mainColor;
}
```

↓コンパイル

```:main.scss
html{
  background-color:"red"
}
```



#### useの挙動

#### importと置き換えただけの場合

|サンプルファイル名|内容|
|---|---|
|main.scss|_var.scssと_sub.scssを読む|
|_var.scss|変数を定義|
|_sub.scss|_var.scssで定義した変数を使う|

_var.scssで定義した変数を_sub.scssで使えないのでコンパイルでエラーになります。

```:main.scss
@use "var";
@use "sub";
```

```:_var.scss
$mainColor:red;
```

```:_sub.scss
html {
  background-color: $mainColor;
}
```

↓コンパイル

エラー

#### importをuseに変更して、名前空間も指定した場合

|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssを読む|
|_var.scss|変数を定義|
|_sub.scss|_var.scssを読み込み、_var.scssで定義した変数を使う|

_var.scssで定義した変数を_sub.scssで使えるのでコンパイルできます。

```:main.scss
@use "sub";
```

```:_var.scss
$mainColor:red;
```

```:_sub.scss
@use "var";

html {
  background-color: var.$mainColor;
}
```

↓コンパイル

```:main.css
html{
  background-color:red
}
```

#### useの名前空間
名前空間の名前はデフォルトではファイル名になりますが、任意の名前をつける事も可能です。

#### as
独自の名前空間を持たせられます。


|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssを読む|
|_var.scs|変数を定義|
|_sub.scss|_var.scssを読み込み、_var.scssで定義した変数を使う|





```:main.scss
@use "sub";
```

```:_var.scss
$mainColor:red;
```

```:_sub.scss
@use "var" as v;

html {
  background-color: v.$mainColor;
}
```

↓コンパイル

```:main.css
html{
  background-color:red
}
```


##### as *
名前空間の指定をせずに呼び出せるようになります。(グローバル)

|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssを読む|
|_var.scss|変数を定義|
|_sub.scss|_var.scssを読み込み、_var.scssで定義した変数を使う|


```:main.scss
@use "sub";
```

```:_var.scss
$mainColor:red;
```

```:_sub.scss
@use "var" as *;

html {
    background-color: $mainColor;
}
```
 
↓コンパイル

```:main.css
html{
  background-color:red
}
```

##### as *のエラー
同じ名前の変数、関数、mixinが読み込まれるとバッティングしてエラーになります。

|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssを読む|
|_var.scss|変数を定義|
|_var2.scss|変数を定義|
|_sub.scss|_var.scssと_var2.scssを読み込み、_var.scssと_var2.scssで定義した変数を使う|




```:main.scss
@use "sub";
```

```:_var.scss
$mainColor:red;
```

```:_var2.scss
$mainColor:blue;
```

```:_sub.scss
@use "var" as *;
@use "var2" as *;

html {
  background-color: $mainColor;
}
```
 
↓コンパイル

エラー








#### useのdefault

|方式|!defaultフラグを持った変数を上書きするとき|
|---|---|
|import|変数をグローバルに定義する必要がある|
|use|ファイル読み込み時にwithを使って変数を上書きできる(グローバルな名前空間を汚染しない)|

```:font.scss
$fontSizeNormal: 1rem !default;
$lineHeightNormal: 1.5 !default;
 
@mixin textLarger () {
  font-size: $fontSizeNormal * 2;
  line-height: $lineHeightNormal* 1.5;
}
``` 

```:main.scss
@use "font" with (
  $fontSizeNormal: 1.6rem,
  $lineHeightNormal: 1.6
);

.textLarge {
  @include font.textLarger();
}
```
 
↓コンパイル

```:main.scss
.textLarge{
  font-size:3.2rem;
  line-height:2.4;
}
```






#### プライベート
名前が「-」か「_」ではじまる変数、関数、mixinはプライベートになります。
変数、関数、mixinは宣言されたファイル内でしかアクセスできません。


|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssを読む|
|_var.scss|変数を定義|
|_sub.scss|_var.scssを読み込み、_var.scssで定義した変数を使う|



```:main.scss
@use "sub";
```

```:_var.scss
$_mainColor:red;
```

```:_sub.scss
 @use "var";
 
 html {
     background-color: var.$mainColor;
 }
```

↓コンパイル

エラー







### forward
useでは、CSS フレームワークなどで変数や関数が見えなくなってしまいます。
ほかのモジュールの変数、関数、mixinを読み込んでエクスポートできます。

#### useとの違い
forwardを宣言しているファイル内ではそのモジュールのメンバーを参照できません。

|サンプルファイル名|内容|
|---|---|
|main.scss|_sub.scssと_var2.scssを読み込み(@use)、_var2.scssで定義した変数を使う|
|_var.scss|変数を定義|
|_var2.scss|変数を定義|
|_sub.scss|_var.scssを読み込み(@use)、_var2.scssを読み込み(@forward)、_var.scssで定義した変数を使う(_var2.scssの変数は使えない)|



```:main.scss
@use "sub";

p {
  color: sub.$subColor;
}
``` 

```:_var.scss
$mainColor:red;
```

```:_var2.scss
$subColor:blue;
```

```:_sub.scss
@use "var";
@forward "var2";

html {
  background-color: var.$mainColor;
}
```

↓コンパイル

```:main.css
html {
  background-color: red
}

p {
  color: blue
}
``` 
 









#### show
どのメンバーをエクスポートするかを選べます。
※それ以外のメンバーはエクスポートされません

```:main.scss
@use "sub";

p {
    color: sub.$subColor;
}
``` 

```:_var.scss
$mainColor:red;
```

```:_var2.scss
$subColor:blue;
```

```:_sub.scss
@use "var";
@forward "var2" show $subColor;

html {
  background-color: var.$mainColor;
}
```

↓コンパイル

```:main.css
html {
  background-color: red
}

p {
  color: blue
}
``` 




#### hide
プライベートにしたいメンバーを除外できます。

```:main.scss
@use "sub";

p {
  color: sub.$subColor;
}
```

```:_var.scss
$mainColor:red;
```

```:_var2.scss
$subColor:blue;
```

```:_sub.scss
@use "var";
@forward "var2" hide $subColor;

html {
  background-color: var.$mainColor;
}
```

↓コンパイル

エラー