- 1. コンパイル
- 2. コメント
- 3. 手っ取り早く移行する
1. コンパイル
コンパイル？
sass ソースファイル名.scss:出力ファイル名.css [オプション]
で、.css ファイルができるらしい。
ちらっとやってみてわかりましたが、ソースファイル名・出力ファイル名は、ディレクトリを前に指定してもよいようです。
参考にしたサイトには書いていなかったのでやってみました。
もうひとつ、map というファイルが作成されます。これについては、以下に、記述のあったサイトをはっていたのですが、読む前にリンク切れになってしまいました（2019年8月29日）。
とりあえず、ここで使用している .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', 'ＭＳ ゴシック', sans-serif;
}
スタイルが、４つ（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', 'ＭＳ ゴシック', 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', 'ＭＳ ゴシック', 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', 'ＭＳ ゴシック', 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', 'ＭＳ ゴシック', sans-serif}
/*# sourceMappingURL=freebsd-common.css.map */
コメントまで綺麗になくなっていますね。うまく動作するのであれば、コメントは .scss 上に存在すれば問題ありませんので、ウェブサイトに置いておくのはこれが良いように思います。
2. コメント
コメントについては、下記に記述がありました。
「【初心者向け】Sassをいい感じに活用する」
前の方でやってみたように「--style compressed」でなければ、「/* ～ */」のコメントは残ります。
で、.css では許されない「// ～」形式のコメントを .scss では記述することができ、こちらは、どのスタイルでも .css 上には残らないと・・・。
.scss が読みやすければ、問題ないので .scss 上は、「// ～」を多用しようかしら。
3. 手っ取り早く移行する
コンパイルしてみてわかりましたが、.scss は、.css の表記に誤りがなければ、その内容をごっそり .scss に記述しても同じ動きをする .css を生成してくれるようです。
ここが「.sass」でなく「.scss」を選んだ一番の理由でもあります。
「.css」の内容をそっくりそのまま「.scss」にコピーしてやれば、即時に使用できますので、それから少しずつ「.scss」の機能を有効に利用するように書き換えていけばいいわけです。
|
