「あーこの指定また使うのかー何回も書いたりコピーするの面倒だな…」
「ここ何回も同じ指定入れててごちゃつくしもっと楽な方法ないかな…」
っていうそこのあなた！ありますよ！「そう。phpstormならね…。」
phpstormで途中で特定の指定を変数にまとめる方法
cssをかいてる時、共通項を変数にくくったりというのはscss（SASS）を使用してる場合にはしている方もいらっしゃると思いますが、途中でここは予想していなかったけど何回も共通で出てくる指定だな…ってことありませんか？
しかもそういう箇所を変更しようとすると結構面倒ですよね…一括で帰る場合ならまだしも変えたくない場所があった場合一括じゃ無理なので1個1個確認…。
なんていう面倒な場面とはおさらばです！
JetBrains社IDE（phpstorm、intelliJ等）でそんなときでも変数にまとめる方法をご紹介します！
変数って何ぞって人も含めてやり方を記載していきます。
変数って？どういうとき便利なの？
変数っていう言葉的に最初は意味がわからないと思いますが…ようは何かのセットを入れておく入れ物みたいなものです。
たとえば上からの余白の距離を共通で使いまわしたいとします。
例としては「margin-top: 50px」みたいなよく使い回す数値ですね。
たとえばサイトの各見出しの余白は同じ数値に指定してあるけど、あとから数字を「52px」に変えたいという場合が出てくると思います。
その場合全てを1つ1つ修正していくのは大変ですよね…漏れも出るかもしれません。
そういう場合にに使えます。
$sub_title: 50px;のように「$変数名: 値;」で定義できます。
そして使う時に
margin-top: $sub_title;
のように共通の指定にしてあげたい部分に記載してあげれば、実際には「50px」として扱われます！
これは便利ですよね。
phpstormでcssを描いてる途中に共通項をまとめたくなった場合
ではいよいよ共通項として変数にまとめたくなった場合。
書いていて「ここは共通で使いまわしたいな…」っていう時。
したにも同じ記述がありますね…何度も同じような記述が書くのがダルイ…。
しかもこのままでは変更する場合全部書き換えないといけませんね…。
というわけで変数に置き換えてしまいましょう。
- 該当箇所を選択
- リファクタリング
- 抽出
- 変数を選択
するとこのように共通している部分が表示され、置き換える箇所も選べます。
今回はすべて置き換えてみます。
変数が自動で作成されました！
ソースを見ると自動で置き換わっています！これは便利！
まとめ
- 途中で変数にまとめたくなった場合でも簡単にまとめられる。
- 定義した箇所は自動で置き換わる。
- その後は使い回せて超便利！
是非活用してみてください！
