Web制作者のためのSassの教科書における勉強記録【アンバサンド・プロパティのネスト・コメント】

購入したWeb制作者のためのSassの教科書。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ【電子書籍】[ 平澤 隆 ] 価格：2376円 (2021/4/18時点) 楽天で購入

こちらのテキストに沿ってSassの記述方法の例文を記録していく

アンバサンド

ネストさせるのではなく、最初に指定しているセレクタ（＝親セレクタ）を参照させたいときに使えるのがアンバサンド。

親要素を参照させたいところに＆をつけるだけでOK

特定のクラスの下でだけ表示を変更させたいとき

See the Pen
xxgaOrb by ao___ (@ao___)
on CodePen.

bodyタグのtopクラス内のsideだけ幅を替えた例

CSSでは

body .class .side

と書くところを

body class &

と書きます。

疑似要素にもアンバサンド

See the Pen
zYNJBRO by ao___ (@ao___)
on CodePen.

あんぱんにカーソルを合わせると文字の色が青くなるのが分かると思います

a:hover{～}

と書くところを

&:hover

とするだけ

特定のクラスに属す親セレクタを変更する

See the Pen
bGgxeKK by ao___ (@ao___)
on CodePen.

親セレクタとして指定しているliのうち、prevクラスのliとnextクラスのliで仕様を変えたいとき

それぞれは親セレクタであり、ネストしていないのでアンバサンドの出番

li.prev{～}

li.next{～}

のところを

&.prev{～}

&.next{～}

とするだけ

プロパティのネスト

-（ハイフン）でつながれている英単語のプロパティはネストして書けるそう。

プロパティのネストをすると、重複する英単語を書かないで済みます

See the Pen
yLgxJQW by ao___ (@ao___)
on CodePen.

View Compiledボタンを押すと分かるようにCSSであれば毎回「border-」を書く必要があるのが省けているのが分かります。

ただ、プロパティのネストをしても書く行数が減るわけじゃないし、見やすくなるわけでもないので無理に使う必要はないと筆者はおっしゃられています…

Sassのコメント

See the Pen
jOyvrJJ by ao___ (@ao___)
on CodePen.

ここで見ていくのは出力結果ではなくSassの中に残すコメントの書き方です。

View CompiledボタンとView SCSS Codeを連打しましょう

//

から始めると以降その行はコメントになります。（1行コメント）

1行コメントはCSSでは消えてしまうので、コメント１が消えています

/* ～ */

CSSと同じくスラッシュとアスタリスクを使ってコメント記述も可能です。（CSSコメント）

この場合はCSSでもコメントが残ります。コメント2も無事反映されております。

ただ、アウトプットスタイルをcompressedにするとCSSコメントも消えてしまうらしいです。

compressedでも消えてほしくないコードはコメント3のように

/*! ～ */

と、アスタリスク直後に！をつけると残せるとのことです

（compressedが何なのかを私はまだ知らないのですが…）

以上