プログラムデザイナーへの旅路

こんばんは！突然ですが…Sass使ってますか？

ボクはまだSass歴は浅い方かと思いますが、既にこれがない生活は考えられないランキングかなり上位にランクインしております！

お金、睡眠、友達、Sassって感じですかね。

タグを入れ子に出来たり、mixinで効率よくしたり、変数やif文のようなプログラムライクなものが使えたり。ホント便利ですよねぇ。

そんな色んな事を効率化してくれるSassですが、中でも一番便利さを感じられるのはレスポンシブの時ではないかなぁーと個人的に思っております。

なぜSassはレスポンシブで便利なのか？

Sassを使っていなかった時は、レスポンシブ用のCSSを一つのスタイルシートに書くのは見にくいという事で、別々のスタイルシートにして、読み込んでいました。

ただ、それだとファイルを横並びに表示しないと、どこをどう変更するのかが分かりにくかったり…
修正とか変更とかする時に、探し出すのに時間がかかったり…
効率悪いなぁーと思っておりました。

それからしばらく時は流れ、Sassの存在、mixinの存在を知りました。
もうね。コロンブスがアメリカ大陸を発見した時くらい感動しましたね。

それ以来は完全に虜です。

ちなみにボクが使ってるmixinはこちら
(基本的にタブレットとスマホしかブレークポイントを入れません)

$widthPC: 1024px; //PC
$widthTab: 768px; //タブレット
$widthSp: 568px; //スマートフォン

@mixin tab {
  @media (min-width: $widthTab) and (max-width: ($widthPC)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($widthTab)) {
    @content;
  }
}

で、こんな感じで利用

html{
    font-size: 16px;
    @include tab {font-size: 14px;};
    @include sp {font-size: 12px;};
}

コンパイルするとこんな感じ

html {
  font-size: 16px; }
  @media (min-width: 768px) and (max-width: 1023px) {
    html {
      font-size: 14px; } }
  @media (max-width: 767px) {
    html {
      font-size: 12px; } }

こういう形であれば、一つのファイルにまとめて書いても行を取らないし、見やすいし、何よりメンテナンスしやすい！！

Sassは知ってるけど、使ってないって人は、是非使うことをオススメしますよ！

Sassって何？って人も、今からでも覚えて使い始める事をオススメしますよ！

ともかく本日はSassでのレスポンシブ化が非常に便利だ！というお話でした。

ありがとうございました！