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

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

こちらのテキストに沿って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では消えてしまうので、コメント1が消えています

/* ~ */

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

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

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

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

/*! ~ */

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

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

以上

青のポートフォリオサイト

新着記事

  • 2021年12月
  • 2021年10月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2020年12月
  • カテゴリ

  • WEB制作
  • 投稿記事一覧に戻る

    コメント

    コメントはありません

    メールアドレスは公開されませんのでご安心ください。
    また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。



    *