Sass/SCSSの基本知識を学ぶ

こんにちは。ヤマウチです。
あっという間に企業実習期間も残り1週間を切ったことにきづいて時間が経つのが早い！と驚いています。
訓練校で過ごした３ヶ月間も早いと思っていたけど、企業実習の方がもっと早く感じています。

本日で実習13日目。
前回に引き続き整骨院サイトです。

午前：スライス・ドットインストール（Sass/SCSS）
午後：コーディング

ドットインストールでSass/SCSSを学ぶ

今回の整骨院サイトでは、訓練校の時から習得したいと思っていたSass/SCSSでコーディングさせてもらえる事になりました。
とは言っても、知識はほぼありません。まずは学校でも教えていただいた「ドットインストール」の「Sass/SCSS入門（全15回）」と「Sass/SCSS」で検索して学習です！

Sass（サース）って?

Sassとは「Syntactically Awesome Stylesheets」の略で、「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味だそうです。
このSassには2種類の記法が存在します。
・SASS記法
・SCSS記法

SASS記法は書きやすい方法ではなくて、後にSCSS記法が出てきてCSSに慣れている人でも見やすいとのことです。
実際にサンプルで作ってみました。

SASS記法

ul
	list-style:none;
	margin:0;
	li
		margin-bottom:10px;
		a
			color:#333;

SCSS記法

ul{
	list-style:none;
	margin:0;
	li{
		margin-bottom:10px;
		a{
			color:#333;
		}
	}	
}	

こうして見るとSCSS記法の方が分かりやすいです！
SassでできることはCSSのネスト（入れ子）と変数が使用できます。
「変数」…訓練校の授業でやりました。最初は理解するのに時間かかりましたが、授業のお陰で抵抗なく頭に入ってきてくれました。

例えば、サイトのメインカラーやサブカラー、フォントサイズなど一括で管理・変更が可能になるのでとても便利だと思いました。先ほどのコードに追加してみました。

$main-color:red;
$sub-color:green;
ul{
	list-style:none;
	margin:0;
	li{
		margin-bottom:10px;
		a{
			color:$main-color;
		}
	}
	.sub{
		color:$sub-color;
	}	
}	

liのaには定義した$main-colorを指定して、ulの中にあるclass="sub"には$sub-colorで定義した色を指定してみました。

今日は、SassのことやSCSS記法についての基本を学ぶ時間でしたが、まだまだ数値や真偽・リストなど便利な使い方が沢山あるので、少しづつ知識を増やしていきたいと思います。

では、ヤマウチでした。