[SCSS/Mixin]テキストのline-heightでできてしまうの余白を先頭と最後の行だけ取り除く

#line-heightで先頭と最後も余白が入ってむかつく :frowning2:

XDでこういった余白が設定されていたとします。
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/e6debbdf-0b2e-88ba-98ec-acd49a57cc4e.png">


行間(line-height)は、デザインでは**文字サイズが16px**に対して**行間が48px**なので
`行間48px÷文字16px=3`と計算し`line-height:3;`を設定。
余白(margin-top)は50pxを設定。
それがこちら:writing_hand:
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="himeka223" data-slug-hash="ExKmMeO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="line-heightの余白がムカつく">
  <span>See the Pen <a href="https://codepen.io/himeka223/pen/ExKmMeO">
  line-heightの余白がムカつく</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

デザインにしっかり合わせたはずなのに、余白めっちゃ開いちゃってます。
むかつきますね。:frowning2:


これは、line-heightにより先頭と最後も余白が入っちゃっているからです。
最初のデザインがこんな感じでつくられちゃってます:frowning2:
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/3e2a71da-9993-2532-2f34-ec046a696fde.png">

じゃあ、50pxからline-heightでできちゃった先頭と最後の余白分をひいてうまいことやれば、、、:robot:
、、、毎回そんな事考えていたら超大変です。

##最強そうな Mixin を見つける :raised_hands:

なにか方法ないかなあと探していたらこんな記事を見つけました。
[\[CSS\]テキスト要素の先頭行だけline\-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック \| コリス](https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html)

> 先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニック

```scss

@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
}
```

まさに私が探し求めていたものです！
記事ではなにやら難しい話ししてますが、私はシンプルに使いたいので、
とりあえずこのMxinで使ってみます！

###かんたんに説明すると:point_up:

**before要素の`margin-top`に指定したネガティブマージンで
`line-height`でできてしまった先頭行の余白を相殺しています！**

相殺する値の計算は`calc`で行っていて、

```
1 - #{$line-height}) * 0.5em
```
1. `$capital-letter`はデフォルトは`1`で、`font-size=フォントの高さ`の場合（font-sizeの75%の高さのフォントなら`.75`）
2. `$line-heigh`は引数で設定したテキストの`line-height`
3. **1.**から**2.**をひくとテキスト1行分の、**上と下の余白を足した数**になります
4. **3.**を`× 0.5em`することで、**上のみの余白数**をだします

**マイナスの値になるので、そのまま相殺しています！**


###少し改良:point_up:


このままだと、先頭行の余白しか相殺してくれてないので、**最終行も余白をafter要素**で削っちゃいます。
さらに**`overflow:hidden;`**で相殺された余白分をカット**させる。

```scss
@mixin lhCrop($line-height:$base-line-height, $capital-letter: 1) {
  overflow:hidden; //相殺した余白をカット
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
&::after{
//最終行も取り除く
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}

```

※`overflow:hidden;`でカットしたことで、どこかでやりづらくなりそうな気もするけど、とりあえずカット。（そうなったとき考える）



###さっそくさっきのコードにつけてみます:relaxed:

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="himeka223" data-slug-hash="ExKmNEw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Mixin lhCrop">
  <span>See the Pen <a href="https://codepen.io/himeka223/pen/ExKmNEw">
  Mixin lhCrop</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


きれいに余白が潰れました！

まだまだもとの記事を解読する必要もありますが、とりあえずはこれで使ってみます！
これで少しでもコーディングのスピードと精度が上がると嬉しいです:santa_tone4: