Sassについて

#デイトラWeb制作コース中級編DAY７の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習31日目⏩<br><br>Web制作コース中級編DAY7💻<br><br>学習時間:3時間34分⏳<br><br>学習内容:Sassの学習✏<br><br>学び📚<br>１　入れ子形式で書けた<br>２　変数が使えた<br>３　&quot;&amp;&quot;記号で擬似要素が書けた<br>４　「<a href="https://twitter.com/mixin?ref_src=twsrc%5Etfw">@mixin</a>」でコードの繰り返し記述を防げた<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/Fb9So79iYn">pic.twitter.com/Fb9So79iYn</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1381956942881562624?ref_src=twsrc%5Etfw">April 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#　【学び】

1　【Saasとは】

CSSの拡張言語のこと

＜Sassのメリット＞
①　入れ子（ネスト）形式で書ける
②　変数が使える
③　”&”記号で擬似要素が書ける
④　`@mixin`でコードの繰り返し記述を防げる

２　【入れ子】

Sassは、親クラスのカッコの中に、続けて子要素のCSSを書くことができる

＜入れ子の書き方＞

![スクリーンショット 2021-04-13 13.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/b3c05ede-e8ed-f225-54fc-97da0a74da25.png)


＜入れ子で孫要素まで書ける＞

HTMLの改装に合わせて、入れ子を深くすることができる

![スクリーンショット 2021-04-13 14.32.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/3960ea9a-1a74-03d7-1ce7-4f8bdbe09842.png)



３　【疑似要素とクラス】

＜＆で繋げる疑似要素・クラスの書き方＞

`&`をつけることで、前の要素をすべて継承できる

左：Sass　　　　　　　　　　　　　　　　　　　　　　　　　右CSS

![スクリーンショット 2021-04-13 14.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/e2f5774e-be41-3b86-e6c3-d9bf92e9a653.png)


４　【変数】

＜変数をCSSに組み込む＞

`「＄」マーク＋名前`をつけて、変数を定義する

画像の例だと、

`28 $link-color-active: #da1e32;`と定義し、値を変数名にする

左：Sass　　　　　　　　　　　　　　　　　　　　　　　　　右CSS
![スクリーンショット 2021-04-13 14.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/03417efa-ee35-49f5-361f-85a19168c481.png)


＜変数定義のメリット＞

制作途中での仕様変更が一括でできるようになる

定義した、変数の値を変えるだけなので、保守性の高いコードになる

＜四則演算もできる＞

①`$link-font-size: 16px;`で16pxの値に変数名を定義

②　値に`$link-font-size`を記入し、四則演算する

画像の例だと、16px＋10pxで`.active` が26pxになっている

![スクリーンショット 2021-04-13 15.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/b6ac5c0c-7485-8cf9-dd51-eae7413114d4.png)

５　【定義したスタイル使う】

＜@extend＞
すでに設定してあるスタイルを、別のクラスに引き継ぐこと
共通で使いたいスタイルを予め設定し、それを`@extend`することで、何回も同じコードを書かなくて済む
![スクリーンショット 2021-04-13 15.56.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/7af0a9c8-9ee6-0475-5109-17148f87c138.png)


＜@mixin＞
一部だけ仕様を変更したいが、ほとんど同じ型のときは、`@mixin`を使う
`@mixin`を反映させたいときは、`@include`を使う

![スクリーンショット 2021-04-13 16.22.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/b06b385b-4ef7-a312-849c-354e5d3980f0.png)

６　【mixinを使ったメディアクエリの設定方法】

予め定義したメディアクエリを`@mixin`で呼び出す

＜従来のメディアクエリの書き方＞
よくないポイント
・コード量が長い
・クラス名ごとに書かないといけない
・ディアクエリ用にもう一度コードを書き直さないと行けない

```style.css
@media screen and (max-width: 767px) {
  .header {
    height: 60px;
  }
}
```

＜@mixinを使ったメディアクエリの書き方＞

いいポイント
・コード量が減る
・どこのクラスに対するメディアクエリかを視覚的に判断できる
・対象のクラスにそのままメディアクエリを書くことができる

```style.css
.header {
  height: 100px; /*ＰＣ用の表示*/

@include mq() { /*メディアクエリ用*/
    hight: 60px;
　　　　　　　　}
}
```

＜メディアクエリ用のmixinの作り方＞

①　マップ型変数　breakpointsを定義

```style.css
$breakpoints: (
/*キー（変数名）　：　値*/
  'sp': 'screen and (max-width: 767px)', /*767px以下（スマホ）用の表示*/
  'pc': 'screen and (min-width: 768px)' /*768px以上（タブレット・PC）用の表示*/
) !default;
```

②　ディアクエリ用のmixinを定義

```style.css
@mixin mq($breakpoint: sp) { /*１　mixinを「mq」を名付ける　２　ここの「ｓｐ」の部分は、breakpointsで定義した、変数名を入れる*/
/*map-get(マップ型変数, キー)で値を取得*/
  @media #{map-get($breakpoints, $breakpoint)} {　/*２で入力された変数名を元に値が呼び出される*/

    /*この中をカスタムできる*/

    @content;
  }
}
```

③　メディアクエリ用のmixinを呼び出す

```style.css
.header {
  height: 100px; /*ＰＣ用の表示*/

@include mq ("sp") {　/*メディアクエリ用*/
    height: 60px;
}
}
```

![スクリーンショット 2021-04-13 17.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/b77562bd-18b6-910c-b3d0-6e4bf9ca8739.png)

７　【functionについて】
Sassは関数も使える

```style.css

@function activeFontSize ($base-size) { /*activeFontSize ()というfunctionを定義して、引数に$base-sizeを定義*/
    @return $base-size + 2px;　/*$base-sizeに２ｐｘを足した値を返り値にする*/
}

$link-font-size： 16px;　/*$link-font-sizeという変数に、１６ｐｘと定義*/

.active {

    font-size: activeFontSize ($link-font-size);
}


/* クラス名「.activer」のフォントサイズの値が18pxになる*/



```