Sassを基本からまとめてみた【入門】

## Sassとは?

Sassとは「Syntactically Awesome StyleSheets」の略称で、日本語では「サース」と読む。
各ワード「Syntactically＝構文的に」「Awesome＝凄い・素晴らしい」
「StyleSheets＝スタイルシート」で成り立つSassは「構文的に凄いスタイルシート」と直訳できる。

## Sassを利用するメリット
1. ネスト（入れ子構造）で記述できる
2. &(アンパサンド)の使い方
3. 変数が利用できる
4. .scssファイルを分割管理できる 
5. コードを複数箇所で使用できる
6. メディアクエリ(ミックスイン（@mixin))機能が利用できる
7. カラーコードを便利に管理できる



「Visual Studio Code」というテキストエディタで、
編集画面で「！」と打つとHTMLの雛形が表示される。


## VScodeでインストール

『Sass』『Live Sass』

ソースコードを入力したら、下のバーの『Watch Sass』を押し、
コンパイルをする


## コンポーネント・ファイル構成

```
  styles
   ├── _function.scss
   ├── _variables.scss
   ├── style.scss
   └── index.html
```
```_function.scss
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
```_variables.scss
//変数を宣言
$mainColor: pink;
$leftContentColor: orange;
$leftTextColor: cornsilk;
$rightContentColor: aquamarine;
$rightTextColor: cornsilk;
```
```style.scss
//変数を宣言
// $mainColor: pink;
// $leftContentColor: orange;
// $leftTextColor: cornsilk;
// $rightContentColor: aquamarine;
// $rightTextColor: cornsilk;
@import './variables';
@import './functions';

// @mixin flexCenter {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: aqua;
}

main {
  width: 100%;
  height: 100%;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  @include flexCenter;
  background-color: $mainColor;
}

.content {
  display: flex;
  //入れ子ができる
  .leftContent {
    width: 650px;
    height: 470px;
    background-color: $leftContentColor;
    border-radius: 10px;
    margin-right: 20px;
    position: relative;

    h2 {
      color: $leftTextColor;
      position: absolute;
      top: 40px;
      right: 30px;
      font-size: 50px;
      cursor: pointer;
      transition: all 0.2s;
      &:hover {
        font-size: 65px;
        color: $mainColor;
      }
    }
  }

  .rightContent {
    width: 300px;
    position: relative;

    p {
      position: absolute;
      top: 120px;
      height: 400px;
      border-radius: 10px;
      background-color: $rightContentColor;
      padding: 15px;
      color: $rightTextColor;
    }
    button {
      position: absolute;
      top: 300px;
      left: 30px;
      padding: 13px;
      border: none;
      border-radius: 3px;
      background-color: gray;
      color: $rightTextColor;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        font-size: 20px;
        color: $mainColor;
      }
    }
  }
}
```
```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass Tutorial</title>
    <link rel="stylesheet" href="./styles/style.css" />
  </head>
  <body>
    <main>
      <div class="content">
        <div class="leftContent">
          <h2>Sass Tutorial</h2>
        </div>
        <div class="rightContent">
          <p>Lorem ipsum dolor sit amet.</p>
          <button>And More</button>
        </div>
      </div>
    </main>
  </body>
</html>
```


## 参考サイト
[【Sass入門】CSSを圧倒的に楽にコーディングできるSassを学んでみよう](https://www.youtube.com/watch?v=kVeB9-bi4DU)
[【Sass入門】意味から使い方、メリットまで基本を紹介](https://www.sungrove.co.jp/introduction-to-sass/)
[SASSの超便利な使い方【HTML/CSSコーディング】](https://www.youtube.com/watch?v=Dxpl3IKLWaQ&t=186s)