陽炎空華

　４月１日だと思っていた納期が、実は３月１日でした。

　…………………orz

　本日、友達とカラオケに行ったので、ぜひとも「行きます！カラオケ一曲目」を一番最初に歌おうと思ったのに、JOYSOUNDが満室だったらしく、選択の余地なくDAMに通された。
　DAMも確かボカロ曲入っていたよーなー。曲名検索、歌手名検索、ジャンルチェック…………結果、見つかりませんでした……orz

　DAMェー。

　テンションだだ下がりだでした。

　次こそは、JOYSOUNDで歌いたい。

　「蘇」は何だか、重かった……。解決に至る過程が少し強引に感じちゃいました。ユウキがお墓を見付けるところとか……。
　「夢」は沙耶には悪いけれど、終始ニヤケが止まりませんでした。
　閑話は湊らしくて思わず笑みが。

　前作より糖度200％でお送りしています！　って感じでした。
　要のデレ方にニヤニヤが止まりません。しかも手が早い、とw
　それにしてもダメ親父たちの量が半端ない（笑）

　深山さんと藤間さんのコンビは最強です！
　今作も期待を裏切らず読ませられてしましました。
　山あり谷ありで、終盤ではホロリとまでさせられました。結びもとても奇麗で、千鶴と要のこれからに妄s……基、想像が膨らみます。

　今作もグイグイ読ませてくれました。
　健気なヒロインに胸打たれつつ、デレた後の白鷹に砂糖を大量生産してしまいました（笑）
　鳳凰より何千倍も美しい鳥とは、「春“燕”」の事ですね、わかりますw

　最近学び始めた scss ですが、日本語の情報の少ない事。どんな関数が使えるのか、どのようにして使うのか、記述箇所の縛りとか、ぜーんぶ英語！
　やってらんないよねっ！　全く。
　第一、英語の成績でアヒルさんが泳いでいた私としては敷居が高過ぎる！
　Google先生の力を借りてますが、情報を正しく読み取れているかとても不安です。
　scss については、自分が欲しい情報を書いていくつもりだけど、基本的に探しも日本語では見つからない内容が多いので、中々（英語解読に時間がかかるので）記事にできない……orz
　まさにジレンマ。

■参考URL
　File: SASS_REFERENCE

SassScript

■参考URL
　File: SASS_REFERENCE | SassScript

■変数 : $
参考URL
　File: SASS_REFERENCE | Variables: $
　Sass(Scss) Memo: 変数 | Culture27:
　変数はドル記号で始まり、CSSプロパティのように設定されています。
　変数はそれが定義されている{}内でのみ利用可能です。
　{}の外で定義されている場合は、どこでも利用可能です。
scss

$var:10px 0;


h1 {
	margin:$var;
}

css

h1 {
  margin: 10px 0;
}

■データタイプ
参考URL
　File: SASS_REFERENCE | Data Types
　SassScript は以下のデータタイプをサポートしています。

• 数値　　：例えば 1.2, 13, 10px（※整数、浮動小数点、単位）
• 文字列　：例えば "foo", 'bar', baz（※引用符有無）
• カラー値：例えば blue, #04a3f9, rgba(255, 0, 0, 0.5)（※カラー文字列、16進数、カラー関数）
• 真偽値　：例えば true, false
• リスト　：例えば 1.5em 1em 0 2em, Helvetica, Arial, sans-serif（※スペースまたはカンマで区切ります）

○リスト関数
参考URL
　List Functions
　・length($list)
　・nth($list, $n)
　・join($list1, $list2, [$separator])
　・append(list, val, separator:auto)

scss（以下共通）

$list:Helvetica, Arial, Georgia, "Times New Roman", Times, sans-serif;
$list1:10px 20px 30px;
$list2:40px, 50px;
$val:60px;

・length($list)
　リストの長さを返します。
scss

.length1 {
	content:length($list);
}
.length2 {
	content:length($list1);
}

css

.length1 {
  content: 6;
}

.length2 {
  content: 3;
}

・nth($list, $n)
　n番目の項目をリストから取得します。
scss

.nth1 {
	content:nth($list,5);
}
.nth2 {
	content:nth($list,1);
}

css

.nth1 {
  content: Times;
}

.nth2 {
  content: Helvetica;
}

・join($list1, $list2, [$separator])
　２つのリストを結合します。
scss

.join1 {
	content:join($list1,$list2);
}
.join2 {
	content:join($list2,$list1);
}
.join3 {
	content:join($list1,$list2,space);
}
.join4 {
	content:join($list1,$list2,comma);
}

css

.join1 {
  content: 10px 20px 30px 40px 50px;
}

.join2 {
  content: 40px, 50px, 10px, 20px, 30px;
}

.join3 {
  content: 10px 20px 30px 40px 50px;
}

.join4 {
  content: 10px, 20px, 30px, 40px, 50px;
}

・append(list, val, separator:auto)
　単一の項目をリストの末尾に追加します
scss

.append1 {
	content:append($list1, $val);
}
.append2 {
	content:append($list2, $val);
}
.append3 {
	content:append($list2, $val, space);
}
.append4 {
	content:append($list2, $val, comma);
}

css

.append1 {
  content: 10px 20px 30px 60px;
}

.append2 {
  content: 40px, 50px, 60px;
}

.append3 {
  content: 40px 50px 60px;
}

.append4 {
  content: 40px, 50px, 60px;
}

■参考URL
　File: SASS_REFERENCE
　【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 - CSS HappyLife:

CSS 拡張機能

■参考URL
　File: SASS_REFERENCE | CSS Extensions

■ネストされたルール
参考URL
　File: SASS_REFERENCE | Nested Rules
scss

#main {
	width:240px;
	p {
		text-indent:1em;
	}
}

css

#main {
  width: 240px;
}
#main p {
  text-indent: 1em;
}

■親のセレクタを参照する : &
参考URL
　File: SASS_REFERENCE | Referencing Parent Selectors: &
　Sass(Scss) Memo: 親セレクタの参照 | Culture27:
scss

a {
	font-weight:bold;
	text-decoration:none;
	&:hover {
		text-decoration:underline;
	}
	div & {
		font-weight:normal;
	}
}

css

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
div a {
  font-weight: normal;
}

■ネストされたプロパティ
参考URL
　File: SASS_REFERENCE | Nested Properties
scss

p {
	font: {
		family:"メイリオ", Meiryo, sans-serif;
		size:30em;
		weight:bold;
	}
}

css

p {
  font-family: "メイリオ", Meiryo, sans-serif;
  font-size: 30em;
  font-weight: bold;
}

コメント

■参考URL
　File: SASS_REFERENCE | Comments: /* */ and //
scss

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
	margin:auto 0;
}

//このコメントは、それぞれ１行の長さです。
//このコメントは、一行コメントの構文を使用しているので、
//コンパイル後のCSSには出力されません。
p {
	color:#000;
}

css

/* このコメントは、複数行あります。
 * このコメントは、CSSのコメント構文を使用しているので、
 * コンパイル後のCSSにそのまま出力されます。 */
body {
  margin: auto 0;
}

p {
  color: #000;
}

　最近、よく見るようになった「SCSS（Sass）」なるものに挑戦してみました。LESSと言うのもあるらしい。
　ちなみに私、「コマンド」何それ？　「ターミナル」美味しいの？　っていうぐらいの初心者です。初めに Ruby と聞いて関係ないわっ！　とか思ってたぐらいです。だって黒い画面とか恐くないですか？　でも、それでも、何とかなりました！
　と言うより、黒画面が恐いので、黒い画面を使わずに済む方法を探しました。そんな感じのメモになります。

■Sass についての参考URL
　Sass（公式：英語）
　Sassで行こう！
　Sass、そしてSassy CSS (SCSS)
　SassやLESSを導入するメリット
　Less & Sass Advent calendar 2011
　CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

　さて、まずは作業環境の構築です。
　一応、win と mac 両方で試してみました。まずは win から。