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

サイト内検索

最近の投稿

アイキャッチ
ワードプレスでのカテゴリごとのページング方法

ワードプレスの投稿ページはカテゴリー関係なくページングされてしまいます。投稿順で表示されるのですが、これを同一カテゴリー内だけでページング、ページ送りをする方法をご紹介します。 お知らせ、ブロ...

09 Dec 2017

アイキャッチ
小学一年生のためのひらがなカタカナ神経衰弱

私の娘は遊ぶことが大好きです。でいつも何して遊ぶが口癖になっているほど遊びが大好き、当然勉強は嫌い。。。それでゲーム感覚で勉強が出来る方法がないかと思案したわけですが、カードゲームが好きなのでカ...

02 Dec 2017

アイキャッチ
グーグルマップのdirections APIを使ってバス貸切料金算出方法

グーグルマップのdirections apiは距離と時間を調べるときに役立ちます。複数の経由地も入れることが可能で[コチラ](https://developers.google.com/maps...

25 Nov 2017

アイキャッチ
日本語のwebフォントを作成する方法

Webフォントを使うといえば[Google Fonts](https://fonts.google.com/)を使って利用している人が多いかもしれません。 そのほか、アドビ社の[Typekit]...

18 Nov 2017

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

著者

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

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

タグクラウド

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