Sassで効率的なCSSコーディング！今さらだけど便利なSassについて

2014年12月24日HTML&CSS

この記事の所要時間： 約 7分29秒

ウェブ制作に携わっている方は、ほとんどの方がご存じだと思います。
ウェブ制作に携わらない方は使わないので知る必要ないか。
という事は、知る必要がある人はみんな知ってるSass。今さら感ハンパないですが、そのSassについて。

僕は、ウェブ制作が仕事ですが、今までCSSは、サクラエディタで書いてました・・・
Dreamweaverを使う事もありましたが、客先等で編集をする事が多く、ツールを入れさせてもらえなかったりする事が多かったので効率化は若干諦めていました。

最近は1箇所で制作する事が多くなってきたので、よし、この機会に効率化に力を入れてみようか！という事で、Sassを導入。
なんて素晴らしいんだ！作業時間、半分は減ってます、ホントに。今まで何してたんだろう・・・

という事で、みなさん知っているかもですが、僕のように知ってても着手しなかった人、ウェブ制作を始める人達に向け、Sassって何？便利なの？っていうお話です。

Sassってなぁに？？

簡単に言うとCSSを生成するためのメタ言語というもので、CSSを効率よく書けて色々とラクできるモノです。「サス」って呼びます。
拡張子は「.sass」、「.scss」の2種類あり、元々はsassだったのが、Rubyという言語に近い記法だった為あまり受け入れられず、よりCSSの記法に近いscssができました。今はこのscssが主流になっているので、基本こちらを使います。
Sassは、コンパイル(変換)する事でCSSファイルを生成してくれるので、scssファイルを編集し、コンパイルしてCSSを作成する、という使い方になります。

Sassって何ができるの？？

CSSで誰もが一度は思った、「めんどくせぇ・・・」って記述をすっきりとできます。その他CSSではできなかった様々な事ができます。

セレクタを入れ子(ネスト)にできます！

CSSでは、idやclassなど毎回頭から書く必要がありました。
Sassでは、ネストでまとめられるので、記述がスッキリ♪

○.scssでの記述

#main{
	background-color:#000;
	.content{
		background-color:#aaa;
		color:#000;
		.sidebar{
			padding:10px;
		}
	}
}

○コンパイルで生成される.css

#main {
	background-color: black;
}
#main .content {
	background-color: #aaaaaa;
	color: black;
}
#main .content .sidebar {
	padding: 10px;
}

スタイルを使いまわせます！

よく書く同じようなスタイルを、パッケージ化しておいて、呼び出して使う事ができます。
ミックスイン(@mixin)と呼ばれる形でパッケージ化、インクルード(@include)と呼ばれる形で呼び出し、というイメージです。

○.scssでの記述

@mixin basetext {
	font:{
		family: Arial;
		size: 20px;
		weight: bold;
	}
	color: #ff0000;
}
.main{
	@include basetext;
	background-color:#fff;
}

○コンパイルで生成される.css

.main {
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	color: #ff0000;
	background-color: #fff;
}

変数が使えます！

よく、同じ色で統一する場合、ん？カラーコード忘れた、どこに書いてたっけ？？って、コピペするのに元を検索したりしませんか？？
そんな時間、もう必要ないんです！
変数を使えるので、よく使うようなものは全て変数として登録しておきましょう！
そうすれば、何か変更があった時や再利用の際、とっても効率が良いですね♪

○.scssでの記述

$mainwidth:800px;
$maincolor:#ff0000;
#wrapper{
	width:$mainwidth;
	color:$maincolor;
}

○コンパイルで生成される.css

#wrapperr {
	width: 800 px;
	color: #ff0000;
}

演算ができます！

ん～、これは今のところ僕個人的にはあまりメリットを感じられないのですが、演算もできます。

○.scssでの記述

.coloradd{
	color:#ff44aa - #555;
}

○コンパイルで生成される.css

.coloradd {
	color: #aa0055;
}

条件分岐や繰り返し処理ができます！

これは便利！JavaScriptのように比較演算子を用いて条件分岐や繰り返しができます。

○.scssでの記述

$type: move;
p {
  @if $type == hoge{
    color: blue;
  } @else if $type == huga{
    color: red;
  } @else if $type == move{
    color: green;
  } @else {
    color: black;
  }
}

○コンパイルで生成される.css

p {
	color: green;
}

CSSファイルを1つにまとめられます！

CSSでも、@importが使用できますね。でも、CSSファイルは複数よりなるべく単一の方がサーバー負荷が減り読み込みが速いです。
なので僕は1枚のCSSに全てのスタイルを書いてコメントでなるべくわかるようにという運用をしていたのですが、SassではCSSと同じように、@importが使え、しかもコンパイル後は、インポートした1枚のスタイルシートが生成されます！！
制作時には複数に分けて、最終1つのCSSで出せるって最高です！
個人的にはこれが一番うれしいかも。

好きな感じでCSSへの変換ができます！

コンパイルしてCSSを生成する際、コンパイルオプションという機能で、どのようなCSSを生成するか選べます。
どんなメリットがあるの？というところですが、コメントやスペースを削除しファイルサイズを圧縮してサーバー負荷を減らしたり、CSSでも可読性を持たせ確認したりとうい選択ができます。
コンパイル方法を選べるので便利ですね♪

Sassのデメリット

やっぱり良い事ばかりではありません。
Sassを使おうとする事で考えられるデメリットも挙げておきます。

学習コストが必要

CSSとほぼ同じ記述なのでたいした事はありませんが、新しい技術を取り入れるにはやっぱりそれなりにお勉強が必要です。
どう書いたらどんな感じになるのか？を把握するまで少し時間がかかるかもです。
でも、基本CSSで書いてしまっても問題ないので、習得するまで使えないという事はなく、使いながら慣れていけば良いですね！

導入に手間がかかる

Sassを使うには、Rubyという言語が必要になります。
Macにはあらかじめインストールされているようですが、WindowsはこのRubyのインストールから始めます。
そしてSassのインストールなのですが、ここまで、コマンドプロンプトを使ったりします・・・多分、好きな人あんまりいないですよね(-_-;)
その他様々な設定や、使っているエディタとの連携など最初に少し時間がかかります。
この導入手順については次回ご案内したいと思っています。

管理するファイルが増える

当然ですが、CSSを生成する為にscssというファイルを作っているので、ファイル、増えますよね。
でも、CSSはイジる必要ないので、そんなに変わらないです。

Sassの概要はこんな感じです。
メリットやデメリットなど、多分ここに挙げたよりたくさんありますが、本当に便利で効率が良くなるので、ひとまず導入してみるのが良いと思います！

The following two tabs change content below.

たきお

うぇぶめも。運営者のたきおです。 ジョギング・草野球が趣味のクセにぽっちゃり体型。 自分の備忘録も兼ねて、ウェブ系のちょっとした情報などを発信しております。 気に入ってもらえればTwitter・Facebookなどでもフォローして頂けると励みになりますm(__)m

ブログランキングに参加しました！
応援宜しくお願いします！！

にほんブログ村 IT技術ブログへ
にほんブログ村

HTML&CSS

Posted by たきお