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

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

  • 2016-01-21  最終更新日:2016-01-21

今回は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∞

sass scss web LESS HTML サス
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
ワードプレスで最強のバックアッププラグインは・・・

あってて良かったバックアップデータということが多々ある今日この頃でございます。 多くの利用者がいるワードプレスなんですが、実は多いが故に狙われてしまうことも多いのです。壊れてしまったり、ウィル...

24 Feb 2018

アイキャッチ
fontawesome5の使い方

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontA...

18 Feb 2018

アイキャッチ
自作アイコンをSVGでの表示方法

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。W...

13 Feb 2018

アイキャッチ
なりすまし・フィッシングメール対策のDMARCとは

DMARC(ディーマーク)とは迷惑メールの送信者から偽装を防ぐ仕組みになります。まだ対応サーバーは少ない気がします。 その仕組みに当たってSPFとDKIM(ディーキム)も知る必要があります。こ...

03 Feb 2018

アイキャッチ
いつもの定型文をDashに登録、便利なスニペット機能

Dashとは、ドキュメントマニュアルとコードスニペットマネージャになります。 サポートされているマニュアルは150の以上あり、オフライン環境でのドキュメントを検索することができます。そしてエデ...

27 Jan 2018

著者

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

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

タグクラウド

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