【Sass】矢印ボタンを作ってみた

#初めに
学習した内容をもとに矢印ボタン（">"や"<")をsassで作成してみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#やりたいこと
①「<」や「>」の形をした矢印ボタンをcssで作る
②マウスを当てると右や左にずれるアニメーションも付ける

#完成形のイメージ
![スクリーンショット 2021-05-08 11.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/67fea1b5-7521-a6b9-ba85-baab21d4fd39.png)

#htmlで箱を用意する
arrow_buttonsの中に矢印ボタンを配置するarrow_buttons__prevとarrow_buttons_next要素を用意します。

```html
<body>

  <section class="buttons">
    <div class="arrow_buttons">
      <div class="arrow_buttons__prev"></div>   <!-- "<"の矢印ボタン -->
      <div class="arrow_buttons__next"></div>   <!-- ">"の矢印ボタン -->
    </div>
  </section>

</body>
```

#SassでBoxと矢印ボタンを作成
①矢印ボタンを配置させるために必要な箱を作る

幅200px,高さ50px、ボーダーラインが赤色の箱を作ります。矢印ボタンはこの箱の中に配置させたいので、positionをrelativeにし、この箱を基準に矢印の位置を調整するようにします。

```css
.arrow_buttons {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  border: 1px red solid;
  position: relative;
}
```
![スクリーンショット 2021-05-08 11.35.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/08a6937b-83ee-365b-3420-3ff2bfdc05cc.png)

②矢印ボタンを押せる領域となる箱の作成（ボタンを押しやすくするため）
左と右矢印ボタンを押せるエリアを箱の形で指定します。それぞれ幅と高さを30pxにしました。また、親要素であるarrow_buttonsのpositionがrelativeに指定されているため、こちらの箱にそれぞれpositionをabsoluteに指定し、親要素（arrow_buttons)からの相対位置をtop、left、rightで決めます。

```css
.arrow_buttons__prev {
    position: absolute;
    top: 8px;
    right: 110px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.arrow_buttons__next {
    position: absolute;
    top: 8px;
    left: 110px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}
```
![スクリーンショット 2021-05-08 11.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/28295e0a-3fb3-f05f-7f21-9f8321901314.png)

③矢印ボタンを作成ー"ㄱ"の形を作る
arrow_buttonsの前に中身が空の擬似要素を作ります。この要素は箱の形にしているので、幅と高さを15pxに指定します。それから上と右に灰色のボーダーラインを引きます。positionをabsoluteにして、topとleftで位置調整をします。

```css
.arrow_buttons {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  border: 1px red solid;
  position: relative;
  &::before {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      left: 10px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
}
```
![スクリーンショット 2021-05-08 11.58.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/8823bd7b-6216-b28f-473f-149c9fa4c163.png)

④"ㄱ"を回転させる
"<"の形にするために回転させます。時計まわりに225度回転させます。

```css
.arrow_buttons {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  border: 1px red solid;
  position: relative;
  &::before {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      left: 10px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(225deg);    //追記
    }
}
```
![スクリーンショット 2021-05-08 12.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/7e7691dd-dcd3-56f0-6b33-2896bb0a1560.png)
矢印の形になりました。

⑤マウスを当てた時のanimation効果を作る
マウスを当てた時に矢印ボタンを左に動くようにしたいので、擬似要素（:hover)のtransformプロパティにtranslateXを-10pxを指定します。また、このアニメーション効果が0.2秒間行われるようにしたいので、transition-durationプロパティを0.2sにします。

```css
&__prev {
    position: absolute;
    top: 8px;
    right: 110px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    &::before {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      left: 10px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(225deg);
    }
    //追記
    &:hover {
      transition-duration: 0.2s;
      transform: translateX(-10px);
    }
  }
```

同じ要領で右の矢印ボタンも作成します。ここまでの完成形は以下の通りです。

```css
.arrow_buttons {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  border: 1px red solid;
  position: relative;

  &__prev {
    position: absolute;
    top: 8px;
    right: 110px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    &:hover {
      transition-duration: 0.2s;
      transform: translateX(-10px);
    }
    &::before {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      left: 10px;
      margin-top: -2.5px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(225deg);
    }
  }

  &__next {
    position: absolute;
    top: 8px;
    left: 110px;
    cursor: pointer;
    color: lightgray;
    width: 30px;
    height: 30px;
    &:hover {
      transition-duration: 0.2s;
      transform: translateX(10px);
    }
    &::after {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      right: 10px;
      margin-top: -2.5px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(45deg);
    }
  }
}

```
![スクリーンショット 2021-05-08 12.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/25d10a26-e077-752b-8948-23811e78ad9c.png)

⑥@mixinを使ってまとめてみる。

```css
@mixin leftArrowButton {
  &__prev {
    position: absolute;
    top: 8px;
    right: 110px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    &:hover {
      transition-duration: 0.2s;
      transform: translateX(-10px);
    }
    &::before {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      left: 10px;
      margin-top: -2.5px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(225deg);
    }
  }
}

@mixin rightArrowButton {
  &__next {
    position: absolute;
    top: 8px;
    left: 110px;
    cursor: pointer;
    color: lightgray;
    width: 30px;
    height: 30px;
    &:hover {
      transition-duration: 0.2s;
      transform: translateX(10px);
    }
    &::after {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 40%;
      right: 10px;
      margin-top: -2.5px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(45deg);
    }
  }
}

.arrow_buttons {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  border: 1px red solid;
  position: relative;

  @include leftArrowButton;
  @include rightArrowButton;
}
```
#参考サイト
https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be