Sassを使ってブログデザイン変更してみて実際に便利だった機能を紹介

Posted 2013/12/23 / Updated 2015/03/03

Web制作者のためのSassの教科書

4844334662

https://book.scss.jp/

リファレンス的な使い方ができるので、簡単なところから使っていくと良い。

ちまちまと作業していたブログデザインがようやく固まりました。

今までPC用とスマホ用の2つのCSSを使ってデザインをしていましたが、スマホの方は基本的には放置していました。というのも、PC版で更新した部分を、スマホ版にコピペするのが面倒くさかったのです。今回のデザイン変更によって、PC版・スマホ版の区別をなくしたため、スマホでもデザインがすっきりと見やすくなったと思います。

近頃流行りのレスポンシブデザインを取り入れ、今までChromeでしか確認していなかった表示も、IE等で確認してちゃんと表示が崩れていないかを確認しました。IE8でみたとき、かなりひどく崩れていたので、見に来てくれた人には迷惑をかけていたかもしれません。

それにしても、Sassがなければとてもじゃないが作業できなかったと思います。

そこで今回のデザイン修正で便利だったと思うSassの機能を紹介します。

ネスト

.main{
  margin: 10px;
}
.main .post{
  border: 1px solid black;
}
.main .post .title{
  font-size: 26px;
}
　　　↓　これがネストを使うとこうなる

.main{
  margin: 10px;
  .post{
    border: 1px solid black;
    .title{
      font-size: 26px;
    }
  }
}

ネストすることで見やすくなるというのが利点ですが、それに加えて変更にも強くなります。

上記のコードでいえば、.mainというクラス名をHTML側で.entryというクラス名にしたい場合）を考えてみましょう。ネストしていないCSSでは.mainという記述が3箇所あるので、そこを全部変更し無くてはなりません。一方でネストして記述しているSassでは、.mainは1箇所に書いてあるだけなので、そこを変更するだけですむのです。

今回のデザイン変更でHTML側も含めて手を加えたため、このネストが大活躍しました。

変数

私は変数は色しか使っていませんが、それだけでもかなり楽になりました。たとえば$main-colorという変数を設定し、#EDF2FAという色（うちのサイトで使っている薄い青色）を指定する。後は同じ色を指定したい場所に、$main-colorと記述すれば済むようになります。

今までは同じ色を指定しているスタイルを探して、カラーコードをコピーしてくるという手間がありました。変数を利用することでそれがなくなり、デザインを調整することに集中できて作業がとても捗りました。

ミックスイン

@mixinで作成することができるが、使い方がいろいろできてこれも便利でした。

同じスタイルをまとめる

clearfixというテクニックを利用していますが、何度も同じ記述を繰り返すのが面倒くさいので、mixinで使いまわしたのです。

@mixin clearfix{
    content:" ";
    display: block;
    clear: both;
}

//使いたい場所で
@include clearfix;

今後互換性を考えてスタイルを変更する場合は、このmixinだけを変更すれば全部変わります。

引数を使ってスタイルを可変させる

mixinには引数を渡すことができるので、すべて固定のスタイルだけではなく、一部数字を変えるような使い方もできます。

@mixin flexitem($grow :1, $shrink: 1, $basis: auto){
    -webkit-flex: $grow $shrink $basis;
    -moz-flex: $grow $shrink $basis;
    -ms-flex: $grow $shrink $basis;
    flex: $grow $shrink $basis;
}

//使いたい場所で
@include flexitem(1,1,120px);

flex-boxなど、ベンダープレフィクスが必要なスタイルを設定する場合、同じような記述を何度も行う必要があります。これを変数と組み合わせてまとめて記述できるようにすると、非常に便利。

メディアクエリに活用

レスポンシブデザインにするために、メディアクエリを多用したのですが、その際にもmixinが大活躍。

@mixin break-1st{
    @media screen and (max-width: 985px){
        @content;
    }
}

.main{
    width: 986px;
    margin: 10px auto;
    @include break-1st{
        //.mainのスタイルが、985px以下の画面幅の場合にこの中に記述したスタイルで上書きされる
        witdh: 100%;
    }
}

特定の画面幅次の場合にだけ変更したいスタイルを、このmixinを使って設定しました。

ただ、この書き方をすると、メディアクエリが記述した数だけ出力されてしまうので、出力されるCSSがとても汚くなります。自動的にbreak-1stで記述したものが、まとまって記載されるわけではないので注意が必要です。

Sassのコンパイルスタイル

Scssファイルはコンパイルして、CSSファイルに変換しないと使えません。

その際に便利なのが、–style compressedオプションです。これは出力されるCSSが、改行・インデントがない状態でコンパイルされるオプションです。

このブログのCSSでいうと、このオプションを使わない場合のファイルサイズは31KBありますが、使うと22KBに小さくなります。改行やインデントだけで9KBもファイルサイズが大きくなっているわけです。記述するスタイルシートの量が増えれば増えるほど、このインデントなどによるファイルサイズの肥大化は深刻になってきます。

出力されるCSSファイルはとてつもなく見づらくなってしまいますが、編集はSassファイルでやるので問題ありません。

少しずつ複雑な機能に手を出していけばいい

以上のように、私のサイトで使っているSassのテクニックなど、単純なものしかありません。

Sassのいいところは、簡単なところから手を付けてやるだけでも、相当に便利になるというところです。

Sass使いたいなと思っている人は、とりあえず既存のCSSをネストで記述してやるだけでも格段に便利になると思います。複雑な機能はそのうち覚えていけばいいので、ぜひぜひ挑戦してみてください。

Web制作者のためのSassの教科書これからのWebデザインの現場で必須のCSSメタ言語

posted with ヨメレバ

平澤隆,森田壮インプレスジャパン 2013-09-13

Amazonのほしいものリストを公開しています。仕事で欲しいもの、単なる趣味としてほしいもの、リフレッシュのために欲しいものなどを登録しています。寄贈いただけると泣いて喜びます。大したお礼はできませんが、よりよい情報発信へのモチベーションに繋がりますので、ご検討いただければ幸いです。

記事の内容に修正リクエストを送る

ネスト

変数