2. HTML - SCSS - コンパイル

 
2.1 コンパイル
2.2 コメント
2.3 手っ取り早く移行する

2.1 コンパイル

 コンパイル?

> sass ソースファイル名.scss:出力ファイル名.css [オプション]
 で、.css ファイルができるらしい。  ちらっとやってみてわかりましたが、ソースファイル名・出力ファイル名は、ディレクトリを前に指定してもよいようです。  参考にしたサイトには書いていなかったのでやってみました。  もうひとつ、.map というファイルが作成されます。これについては、以下に、記述があったので、後でじっくり読んでみようと思います。
SassのデバッグにSource Mapsを使うべきたくさんの理由
 とりあえず、ここで使用している .css のさわりの部分のみ、.scss 風に書いてみました。

@CHARSET "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);	/*	'Mplus 1p'				*/

$bg_color_normal   : #F8FFF8;
$text_color_normal : #333344;

body
{
	width: 100%;
	margin: 20px 0px 80px 0px;										/*	上	右	下	左			*/
	background-color: $bg_color_normal;								/*	背景色					*/
	line-height: 110%;
	color:       $text_color_normal;								/*	テキストの表示色			*/
	position: relative;												/*	通常位置					*/

	/*	☆font-family	*/
	font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
}
 スタイルが、4つ(nested, expanded, compact, compressed)あるらしいので、それぞれの出力結果を見比べてみます。  スタイルを指定するオプションは「--style スタイル名」です。  --style nested

@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@CHARSET "UTF-8";
/*	'Mplus 1p'						*/
body {
  width: 100%;
  margin: 20px 0px 80px 0px;
  /*	上	右	下	左					*/
  background-color: #F8FFF8;
  /*	背景色							*/
  line-height: 110%;
  color: #333344;
  /*	テキストの表示色				*/
  position: relative;
  /*	通常位置						*/
  /*	☆font-family	*/
  font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif; }

/*# sourceMappingURL=freebsd-common.css.map */
 やぁね。@charset は、小文字が正しいのね。しかも、自分で判断してつけてくれているようです。  とりあえず、修正せずに他のスタイルを試してみます。  --style expanded

@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@CHARSET "UTF-8";
/*	'Mplus 1p'						*/
body {
  width: 100%;
  margin: 20px 0px 80px 0px;
  /*	上	右	下	左					*/
  background-color: #F8FFF8;
  /*	背景色							*/
  line-height: 110%;
  color: #333344;
  /*	テキストの表示色				*/
  position: relative;
  /*	通常位置						*/
  /*	☆font-family	*/
  font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
}

/*# sourceMappingURL=freebsd-common.css.map */
 --style compact

@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@CHARSET "UTF-8";
/*	'Mplus 1p'						*/
body { width: 100%; margin: 20px 0px 80px 0px; /*	上	右	下	左					*/ background-color: #F8FFF8; /*	背景色							*/ line-height: 110%; color: #333344; /*	テキストの表示色				*/ position: relative; /*	通常位置						*/ /*	☆font-family	*/ font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif; }

/*# sourceMappingURL=freebsd-common.css.map */
 --style compressed

@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);@CHARSET "UTF-8";body{width:100%;margin:20px 0px 80px 0px;background-color:#F8FFF8;line-height:110%;color:#334;position:relative;font-family:'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif}
/*# sourceMappingURL=freebsd-common.css.map */
 コメントまで綺麗になくなっていますね。うまく動作するのであれば、コメントは .scss 上に存在すれば問題ありませんので、ウェブサイトに置いておくのはこれが良いように思います。

2.2 コメント

 コメントについては、下記に記述がありました。
【初心者向け】Sassをいい感じに活用する
 前の方でやってみたように --style compressed でなければ、/* ~ */ のコメントは残ります。  で、.css では許されない // ~ 形式のコメントを .scss では記述することができ、こちらは、どのスタイルでも .css 上には残らないと・・・。  .scss が読みやすければ、問題ないので .scss 上は、// ~ を多用しようかしら。

2.3 手っ取り早く移行する

 コンパイルしてみてわかりましたが、.scss は、.css の表記に誤りがなければ、その内容をごっそり .scss に記述しても同じ動きをする .css を生成してくれるようです。  ここが .sass でなく .scss を選んだ一番の理由でもあります。  .css の内容をそっくりそのまま .scss にコピーしてやれば、即時に使用できますので、それから少しずつ .scss の機能を有効に利用するように書き換えていけばいいわけです。