超現場ブログ

Technique,Design and Events

【Gulp開発環境構築】タスクを自動化する(sass編)【第二回】

Twitter Facebook Google+ はてブ

スクリーンショット 2017-10-30 20.22.49

sass編ではcssのコンパイラーsassを使ってgulpの中でコンパイルを自動化する環境を作ってみましょう。
gulpの開発環境にsass導入する前に今回はsassとは何かという話をしたいと思います。

cssプリプロフェッサー

皆さんはsassという物をお使いになった事はありますか?
開発当時はlessでコンパイルされていたbootstrapもsassでコンパイルされるようになりました。
sassやlessはcssプリプロフェッサーと呼ばれています。
Sassは、Syntactically Awesome Stylesheetsの略です。直訳すれば「とっても素晴らしいスタイルシート」になってしまい身も蓋もありませんがSassはhtmlの入れ子の構造をそのまま表現して書きます。cssは入れ子構造を意識していないプログラムです。

cssをコンパイルするメタ言語

saccはcssのメタ言語と呼ばれています。つまり、cssの定義を行うための言語の事です。
多くのプログラマは入れ子構造で書かれていないcssをとても不合理に思うそうです。そこでhtmlの構造をそのまま記述し、後で本来のcssの形に書き出す(コンパイル)するsassが生まれました。
sassはよりプログラマフレンドリーなスタイルシートと言えます。

sassの記述例

cssの書き方は以下の様に階層構造を子孫セレクタによって住所のように表しています。

   width:400px;
}
nav ul {
  margin: 0 auto;
}
nav ul li{
  width: 100px;
}
nav ul li a{
  display: black;
}

cssでは上記の様に書いた子孫セレクタのを代わりに階層を書けばいいのです。

nav
	width:400px;
	ul
		margin: 0 auto;
		li
			width: 100px;
			a
				display: black;

しかしこの方法はあまりにもcssとかけ離れているためコーダーに人気がありませんでしてた。
そこで開発されたのがJavaScriptやphpなどのスクリプト言語に近い書き方であるscss記法が登場しました。

上記のsassをscssで記述すると以下の様な書き方になります。

	width: 400px;
	ul {
		margin: 0 auto;
		li {
			width: 100px;
			a {
				display: block;
			}
		}
	}
}

htmlと同じ入れ子構造になっており、cssより解りやすくなりました。
次回は、gulpのプロジェクト内で自動で、scssからcssへのコンパイルを行う方法をお伝えいたします。
また、高機能エディタSublimeText3を使ったGulp開発環境構築法を、スクーにて全6回でお届けします。
合わせてご覧ください。
【2017-2018年版】Sublime Text入門

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.