【備忘録】Sassについて勉強してみたのでまとめてみた

# はじめに

本記事の目的は、現在フロントエンジニアを目指して勉強中の自分が忘れないように記録しておくためです。  
間違っている箇所等ありましたら、ご指摘頂けると助かります。

## Sass とは

CSS の preprocessor。CSS にはない入れ子での記述や関数を使用できたり等、効率的にスタイリングができる CSS の拡張版。
Sass で記述したものを CSS に変換後、そのスタイルシートを HTML にリンクする。

## Sass の特徴

1. 変数が使える(CSS3 でも使える)
2. 入れ子で記述可能
3. mixins(何回も使うコードのかたまりを名前をつけて保存)
4. extend(継承)
5. function(関数、戻り値を返すことができる)
6. インポート(まとまりごとにファイルを分けることができる!)

## 例をあげてみる

### 1. 変数が使える

スタイリング全体で繰り返しいろんなところで使うようなものを設定。(色とか、フォントとか)

```scss
/*(scssファイル)*/

$color-primary: blue;
$color-secondary: orange;

$font-josefinSans: "Josefin Sans", sans-serif;
$font-nunito: "Nunito", sans-serif;

/*使い方*/
h1 {
  color: $color-primary;
}
```

### 2. 入れ子で記述可能

```html
<!--(index.html)-->

<div class="parent">
  <div class="child">
    <p class="child-paragraph">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur
      nobis eligendi quas illum mollitia dicta neque! Esse vitae ullam quaerat.
    </p>
  </div>
</div>
```

```scss
/*(scssファイル)*/

/*使い方:子要素は親要素の波括弧内に記述でき、親要素と共通のクラスは&を使って省略できる*/

.parent {
  .child {
    &-paragraph {
      font-size: 12px;
    }
  }
}
```

### 3. mixins(何回も使うコードのかたまりを名前をつけて保存)

例えば、メインヘディングとサブヘディングで同じスタイルにしたい場合。
mixin はスタイリングのためのコードのかたまり。

```html
<!-- (index.html)-->

<h1 class="main-heading">This is main heading</h1>
<h2 class="sub-heading">This is sub heading</h2>
```

```scss
/*(scssファイル)*/

/*共通のスタイルの設定:使う時に変数を渡して使用できるし、変数を渡さない場合の初期値も指定できる*/

@mixin headingStyles($fontSize: 50px) {
  font-size: $fontSize;
  color: blue;
  text-align: center;
}

/*使い方*/
.main-heading {
  /* includeして使う*/
  @include headingStyles;
}

.sub-heading {
  @include headingStyles(30px);
}
```

### 4. extend(継承)

あるセレクタのスタイルを他の要素で利用する。
mixin が、設定したスタイルを要素にコピーするのに対し、@extend はあるセレクタのスタイルを継承するセレクタにアップデートする形。

```html
<!--(index.html)-->

<div class="error error--serious">Oh no! You've been hacked!</div>
```

```scss
/*(scssファイル)*/

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}
```

extend だけに使いたいスタイルルールがある時は、*プレースホルダーセレクタ*を使用する。クラスセレクタに似ているが、'%'でスタイルを設定する。

```scss
/*(scssファイル)*/

/*placeholder selectorでスタイリング。これはCSS出力には含まれない*/
%some-placeholder {
    // code here
}

/* placeholder selectorを継承。これはCSS出力には含まれる*/
.some_selector {
    @extend %some-placeholder
}


```

### 5. function(関数、戻り値を返すことができる)

何か計算とか処理をする、新しい値を返すなどの時使う。
built-inで使えるfunctionは*lighten, darken, transpatize, mix*等たくさんある。


```scss
/*(scssファイル)*/

/*関数を作る*/
@function fontSize($size: 25px) {
    @return $size * 2;
}

/*使い方*/
.selector_name {
    /* 30pxなど指定ない場合は、初期値の25pxをもとに関数を実行する*/
    font-size: fontSize(30px)
}


```

### 6. インポート

複数のファイルにscssを記述した後、メインのファイルにインポート、その一つのファイルをCSSに変換することができる。
　　
ファイルの構成一例:

```
Main-folder
    -css
        -main.css(ここにSCSSから変換されたコードが出力される)
    -scss
        -main.scss(ここで他のSCSSファイルをインポートする)
        -_base.scss (スタイルのベースとなるコード。変数、mixin, placeholderセレクタなど記述)
        -_components.scss(コンポーネント。ボタンとか繰り返し使えるような部品のコード)
        -_layout.scss(レイアウト関連のコード)
    index.html
```

```scss
/*(main.scss)*/

/*下線は抜き、拡張子は記述しないでインポートする*/
@import "base";
@import "layout";
@import "components";

```

### 感想
基礎的なことを、ドキュメントやチュートリアルを通じて勉強しました。拡張された機能が多く、使いこなすことができればとても便利だと感じました。(当たり前ですが...)
引き続き勉強していきたいと思います!