イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Sassって確かにAwesomeだと思った話

こんにちは、最近弊社のサービスのフレームワークがLaravelになり、
ヒィヒィ言いながら開発している小柳津です。
最近、開発の依頼を受けて、CSSをいじることがあるのですが、とにかくいじりづらい。。。
ファイルによっては1つのファイルに3000行以上書かれているファイルも!

なんとかどーにかならないの?

ということで今回はCSSを美しく記述でき、保守性も高まるという
Sass(Syntactically Awesome Style Sheets)を触ってみました。

Sass(Syntactically Awesome Style Sheets)とは

Awesomeとは日本語訳すると「驚くばかり」(Google翻訳より)
なので、驚くばかりなスタイルシートということで、、、これは期待できそうです。

SassとはCSSをより簡単に記述することができ、プログラミング言語のように変数やincludeを使用できます。
しかし、そのかわりコンパイルが必要なこと・学習コストがかかり少し敷居が高くなってしまうのが弱点かもしれません。
拡張子.scssのファイルをコンパイルし、.cssファイルを作成する流れになっています。

百聞は一見にしかずということで見てみましょう。

・ 変数が使用できる

$height:150px;
$width: 200px;

body {
	height: $height;
	width: $width;
}

↓コンパイル後

body {
	height: 150px;
	width: 200px}

・ セレクタをネストできる

body {
	width: 600px;
 	color: red;
	main {
		backgound-color: black;
		width: 400px;
		.news-line {
			padding: 10px;
			margin: 5px;
			color: bule;
		}
	}
}

↓コンパイル後

body {
	width: 600px;
	color: red; }

body main {
	backgound-color: black;
	width: 400px; }

body main .news-line {
	padding: 10px;
	margin: 5px;
	color: bule; }

・ includeが使用できる(引数で値も渡せる!)

@mixin box-scale($height, $width) {
    height: $height;
    width : $width;
}
div {
    @include box-scale(1000px, 500px);
}

↓コンパイル後

div {
  height: 1000px;
  width: 500px; }

これは@mixinで指定したスタイルを@includeで呼び出すことができます。
なんかこれだけでもごっちゃりしたCSSをスッキリ書けるんじゃないかと思ってきました!

・繰り返しも使える

class="fs-12"というクラスを指定してCSS側で.fs12{font-size: 12px;}って書くことがよくあるんですが、
こういったクラスをfont-sizeごとに用意する、そんなパターンも!

@for $i from 16 through 20 {
    .fs-#{$i} { font-size: #{$i}px; }
}

↓コンパイル後

.fs-16 {
  font-size: 16px; }

.fs-17 {
  font-size: 17px; }

.fs-18 {
  font-size: 18px; }

.fs-19 {
  font-size: 19px; }

.fs-20 {
  font-size: 20px; }

繰り返しは@for@foreachがあります。
変数の中身を出力したい場合は#{}を使えば良いみたいですね!

・ 配列を反復処理できる

$positions: above, middle, under;
$colors: green, yellow, red;

@each  $position in $positions{
    $index_key: index($positions, $position);
    .position-#{$position} {
        background-color: nth($colors, $index_key);
    }
}

↓コンパイル後

.position-above {
  background-color: green; }

.position-middle {
  background-color: yellow; }

.position-under {
  background-color: red; }

変数には複数の値を入れることで配列としても使用できます。
@eachで配列の値の数だけ反復処理ができ、indexnthで配列のキーや値を取得できます。
これはかなり幅が広がりますね!!

ん〜これは確かにAwesome

調べると2013年あたりから記事が見つかりますので、もっと詳しい記述法は是非調べてみてください。
プログラミングを本格的に学び、早4ヶ月。CSSの仕様が元からこうであればいいのに、、、と思うばかりです。

インストール・コンパイル方法

・ インストール方法

とっても簡単です。SassはコンパイルするにあたりRubyが必要ですが、
現在のMacの場合はプリインストールなので、以下のコマンド打つだけです。

sudo gem install sass

インストール完了! Windowsの方はすみませんが、Rubyのインストールからお願いします。

・ コンパイル方法

これもとっても簡単です。コンパイルしたいファイル名.scssを指定し、コンパイル後のファイル名.cssを指定する

sass <name.scss> <name.css>

コンパイル完了!

まとめ

Sassを使えば、共通化やどこにどのセレクタを書くべきかなどがとても明確になるので、
あとは組織毎にルール化をしっかりとすれば、かなり保守し易く分かりやすいCSSが書けるんではないでしょうか。

sass.png

↑新人研修のときに作ったもので簡単なCSSをSassで書き換えましたが、2/3くらいに減らせました、
簡単なものだったのでそのくらいでしたが、複雑なものの場合はもっと減らせると思います。

調べると自動コンパイルやRuby以外でのコンパイルなども可能だそうです。
これらを揃えて、CSSをキレイにしたいなぁ。
CSSのごっちゃり感で悩まれている方はとりあえず一度触ってみるがオススメです。

今回はここで失礼します。