CSS管理にSassという手はいかがでしょうか?

Jan 21, 2016

CSS管理にSassという手はいかがでしょうか?

2016-01-21 最終更新日:2016-01-21
sass scss web LESS HTML サス

今回はCSS拡張メタ言語をご紹介します。

なにそれ?って言う方も多いと思います。大まかに分けるとLESSとSassに分かれます。LESSの方が学習コストは低いですがSassはLESSを含んでさらに出来ることが多いです。

Sass公式サイト

LESS公式サイト

でSassとかLESSとかってなんなんだっていうことですが、簡単に言うとCSSをより簡単に記述しようってことです。


スポンサーリンク


どういうことかというと下記をご覧ください。$widthというのは変数で使い回すことができます。一つ変えれば全て変わります。#mainの中にネスとした.contentがありますね。CSSの継承はネストを用いてシンプルに記述できます。

sassはcssをプログラムチックに扱うことが出来て管理も楽。

scss

$width:500px;
$color:#aa443f;
#maincontainer{
	width:$width;
	color:$color;
}
#main{
	background-color:#000;
	.content{
		background-color:#aaa;
			color:#000;
			.sidebar{
				 padding:10px;
			 }
		}
}

css

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

その他import機能で複数のファイルを一つにしたりミックスインとインクルードでスタイルを使い回せたり計算ができたり条件分岐や繰り返し処理などこれはかなり便利な機能です。

html

Sassのインストール/コンパイル方法

Sass導入にはRubyが必要です。Windowsなら⇒ルビーダウンロード。Macの場合はすでに入っているのでインストールする必要はありません。それからほんの少しだけどコードを知って置かなければならないのです。ターミナル画面を少し使います。

Rubyインストールした後はターミナル画面からSASSをインストール Ruby用のパッケージ管理システムのgemからインストールします。

gem install sass
# コンパイルコマンド
sass css/style.scss css/style.css

とすればコンパイルされるのですがいちいち何回も記述するたびにコンパイルするのが面倒なので

sass --watch css/style.scss:css/style.css

–watchコマンドをつければ自動的にコンパイルされます。cssファイルが多い場合はフォルダ指定しておけば全てに適応されます。

sass --watch scss:css

とすればファイル名同じままcssに展開してくれます。オプションで展開が4種類出力できます。

  • nested # デフォルトの展開方法です。
  • expanded # 典型的なCSSの記述スタイルです。私はこれで出力しています。
  • compact # 各属性を1行で書くスタイルです。
  • compresse # 圧縮版です。すべての属性に改行がないスタイルです。

sass --style expanded --watch scss/style.scss:css/style.css

SASSフレームワークとしてCompassというのがあります。SASSのmixinとしてひと通り用意されてるのでかなり楽に作業が行えます。 Compassをインストールには同じくターミナルより

gem install compass

とするとインストールできます。

因みにSCSSとSassは同じではありません。これも若干違いがあります。 大まかに言えばSassは{}や;が不要で見た目がシンプルですがcssに近いSCSSの利用が多いようです。

詳しい使い方などは⇒Sassチートシートが役立つと思います。

最近はタスクランナーのgulpなどを利用してsassを使うととても便利です。

下記のような本もオススメです。


∞Tadashi Suyama∞

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒[画像加工・写真編集|Fotor - 無料...

20 May 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

sass scss web LESS HTML サス
フッターイメージ