2016/5/26

Web制作

はじめてのSass

先日、このブログをリニューアルしました
私はあまりお仕事でコーディングをお請けしないので、Sassはまだ未経験でした。
自分の制作は実験も兼ねてできるので、今更ながら初挑戦してみました。(⌒-⌒; )

書籍「Sassファーストガイド」

Sassの本を買いにいきますと、当時書店には2冊ありまして、昨年刊行の新しい方を購入しました。
概念から記述方法、便利アプリにCompassの利用方法まで、とてもわかりやすかったです!

使ってみたアプリ

Prepros

上記書籍で紹介されていたコンパイラです。有料ですが、お試しもできます。黒い画面じゃないので操作が簡単〜。

https://prepros.io/

Atom

エディタはオープンソースのAtomをダウンロードしてみましたよ。
私は普段はDreamWeaverを使っています。画像の多いページのコーディングなどはやっぱりDWが便利なんですが、最近は強制終了も多いし、画面に謎の変な線が入ることもあるし。。
ブログのテンプレート程度のコーディングならエディタが軽くて使いやすく便利ですね!

https://atom.io/

Sassで便利だなーと思ったこと

実際にコーディングしてみて、やはり慣れるまではちょっと違和感があったのですが、2日ほど触っていると段々と便利さがわかり快適になってきました。

色んな利点があると思うのですが、特に私がいいなーと思った点をあげてみます。

scssファイルを分散してスタイルを探しやすく、書き出すcssは一つに

cssはあまり複数作りたくない派だったのですが、Sassの場合はヘッダー、コンテンツ、フッターなど要素ごとにscssファイルを作り、cssではまとめて書き出すようにしました。
長〜いファイルの中ではスタイルを探すのが大変ですけど、単純にファイルを分散するだけで探すストレスが減ります!

ファイル構造はこんな感じです。
0526sass

scssフォルダの中に更にmodulesフォルダを作り、その中で各ブロックごとのscssファイルを入れています。
それを、layout.scssのソースの下部でインクルードしています。
layout.scssには、後述しますが変数などをまとめて書いています。
インクルードするscssのファイル名の最初に_(アンダーバー)がついているのは、コンパイルしたときに単品のcssとして書き出さないようにするため。
でも何故かPreprosでコンパイルしたらmodules内のscssも全部cssに書き出していました(汗)設定が悪かったのかな。。。

色やフォント、解像度など、何度も出てくる要素を変数に

サイトカラーを変数に設定していると、色番号をいちいちコピペしないでいいので本当に便利です!
途中で色の変更が発生した場合でも、置換しないでも変数の設定を変更するだけでOK。
今回はPhotoshopでカンプを作らず、コーディングとデザインを並行して作っていったのですが、例えば$brand-goldを50%の色で、というような指定もできるのでいちいちPhotoshopで色を探す手間がいらず、便利でしたー。

色の他にも、フォント指定やレスポンシブのブレイクポイントなどを変数で管理しました。

何度も出てくるソースはまとめてMixin

見出しのMixin、本文のMixinを設定して、フォントや色などを設定したものを使い回していました。
今回はシンプルなデザインだったので使い所があまりなかったのですが、ボタンなどでも絶対使えますね。

レスポンシブのブラウザごとの記述が楽チン

レスポンシブのコーディングの際、今までは最初にスマホ用のCSS、同CSSファイルの下部にタブレット用、PC用、、と解像度を分けて記述していました。
Sassでは、一つのclassの中で各解像度の記述もできるので、書くときも後から探すのも簡単ですー。

※ただ、これだと書き出したCSSが解像度ごとにまとまらないんです、、、
他に方法があるようなので、次はもうちょっと勉強します!

まとめ

Bootstrapでサイトを作る上で、膨大なCSSの取捨選択をするにはやっぱりSassがいいのかなーと思っていましたが、なかなか手をつけられず。。
実際にSassを使ってみると、久々にコーディングが楽しかったです!
まだ今回触っただけなので全然使いこなせていませんが、条件分岐のようなプログラミング的な処理もできるようですし、突き詰めると奥が深そうです。。
そこまでではなくても、私が対応できるような複雑ではないコーディングでも十分便利に使えるのがわかりました。
Compassというフレームワークも結局今回は使わなかったので、また自作のサイトで実験してみたいと思います。

“はじめてのSass” への2件のフィードバック

  1. minami より:

    初めまして、HPからコンタクトできなかったので
    こちらからご連絡させて頂きました。
    コンセプトと、とても優しい雰囲気にひかれました
    web作成など詳しい事を聞きたいのですが
    どうしたらいいですか?

  2. kunugidesign より:

    コメントありがとうございます。申し訳ございません。。先ほどお問い合わせフォームを再開いたしました。
    お手数ですがご連絡いただければ幸いです。宜しくお願い申し上げます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

こちらもあわせてどうぞ

    関連する記事は見当たりません…