Blog スタッフブログ

まだCSSで書いてるの?Sassを使って効率的にスタイリング

Category | Blog
Tag | /
/ 25,594views

こんにちは、先日第一子が誕生し父になった奥田です。
生まれてすぐ新生児室の前で一眼レフで写真を撮りまくるといういきなりの親バカぶりを発揮しまくっていますが、良き父になれるよう精進してまいりたいと思います。

さて、個人的には普及しだした当初から使っているので割と今更感はありますが、今回はSassのご紹介です。
僕はあまり複雑なことはせず、CSSのネスト化やちょっとした変数の持ち回りなどで使っています。
この記事で少しでもSassに興味を持っていただけると幸いです。

Table of contents

  1. Sassとは?
  2. インストール
  3. 使い方
  4. SASS記法とSCSS記法
  5. Sassでできること
  6. 最後に

Sassとは?

Sass(サース)とはCSSを変数やmixinと呼ばれる関数を使って書くことができるRuby製のCSSメタ言語です。
複数のSassファイルをimportし、コンパイルすることで一つのCSSにまとめることもできます。
※日本では「サス」と呼ばれることが多いです。

Sass
Sass(サース、英: Syntactically Awesome Stylesheets)は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
https://ja.wikipedia.org/wiki/Sass

インストール

Sassをインストールしてみましょう。
Windowsの人はRubyInstallerからRubyをダウンロードしてインストールします。
Macの人はすでにRubyが入っているのでインストールする必要はありません。
ターミナルまたはコマンドプロンプトから以下のコマンドでRubyのバージョン情報が出力されればRubyが入っているということです。

ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

あとは以下のコマンドでSassのインストールが完了します。

gem install sass

同じくバージョンを確認すればインストールできているのがわかると思います。

sass -v
Sass 3.4.23 (Selective Steve)

使い方

コンパイル

以下のコマンドで指定したscssファイルをコンパイルしcssファイルへ出力することができます。

sass input.scss:output.css

監視

Sassは変更を監視することができます。
フォルダー内のファイルやファイル自体に変更があった際にコンパイルします。

sass --watch input.scss:output.css

僕はこのコマンドで毎回記述するのは面倒なので「gulp」というタスクランナーを使っています。
この記事ではgulpの使い方は割愛します。

もっとフロントエンドの環境を極めたい方は以下の記事を参考にしてください。
いまどきのWebサイト制作におけるフロントエンド開発環境を構築してみた

SASS記法とSCSS記法

実際にどのように記述するのかを見ていきましょう。
CSSだと以下のように ul#hoge を複数書かなくてはならず、冗長になってしまいます。

CSS

ul#hoge {
	list-style:none;
	margin:0;
}
ul#hoge li{
  margin-bottom: 10px;
}
ul#hoge li a{
  color:#333;
}

Sassではセレクターをネストすることができるので、以下のようにして書くことができます。

SASS記法

ul#hoge 
	list-style:none;
	margin:0;
	li
		margin-bottom: 10px;
		a
			color:#333;

ただ、この書き方はCSS使いの方にはあまり書きやすいものではなく、後にSCSS記法というものが登場しました。

SCSS記法

ul#hoge {
	list-style:none;
	margin:0;
	li{
		margin-bottom: 10px;
		a{
			color:#333;
		}
	}
}

CSSに慣れている人でも見やすくわかりやすいですね。

Sassでできること

Sassでできることはネスト(入れ子)だけではありません。
よく使うものを抜粋してご紹介致します。

1. ネスト(入れ子)できる

先程の例のようにセレクターをネスト(入れ子)することができます。

2. 変数が使える

Sassでは変数が使えます。
例えばサイトのメインカラーやサブカラーを一気に変更する修正が入った際に値を書き換えてコンパイルすると一気に変更が可能になります。
「$」マークから始まる変数名を設定することで使いまわすことができます。

$main-color:#222;
$sub-color:#ccc;
#hoge{
	color:$main-color;
	a{
		color:$sub-color;
	}
}

コンパイル後

#hoge{
	color:#222;
}
#hoge a{
	color:#ccc;
}

3. mixin(関数)が使える

Sassではmixinと呼ばれる関数のようなものを使えます。
mixinとは似たような処理を、呼び出す際の引数で変更できるものです。
例えばベンダープレフィックスが必要なものをひとまとめにしておけば一回の記述ですべてを書くことができます。
@mixinで記述し定義しておき、 @include で使用することができます。

@mixin transform($transforms){
    -webkit-transform: $transforms;
       -moz-transform: $transforms;
        -ms-transform: $transforms;
            transform: $transforms;
}
#hoge{
	@include transform(scale(2));
}

コンパイル後

#hoge{
    -webkit-transform: scale(2);
       -moz-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}

4. importできる

変数やmixinなどのファイルを別ファイルにしインポートすることができます。
ページごとのファイルや、エレメントごとのファイルを作成し一箇所でインポートしてコンパイルすればひとまとめにすることができます。

@import "./settings.scss"
@import "./mixins.scss"

最後に

Sassの登場でコーディングが飛躍的に速くなりました。
プログラミングは少し苦手な印象をお持ちの方もCSSを少し楽に書けるという感覚ではじめられますので是非試してみてください。

Category | Blog
Tag | /
Author | Mineo Okuda / 25,594views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)