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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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