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

サイト内検索

最近の投稿

アイキャッチ
姫路セントラルパークに行ってきた感想

さて久しぶりになりましたが連休中に姫路市に行って参りました。太陽公園と姫路セントラルパークを2日かけて回りましたが姫路セントラルパークに関しては1日では足りないぐらいかもしれないです。ここは遊園...

12 May 2019

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

著者

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

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

タグクラウド

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