SCSS（エスシーエスエス）CSSをより便利に扱うことができる構文【擬似クラス:hover】-STEP2

STEP1ではSass（サス）の基本構造内容を書きました。

この章では、擬似要素の記述方法について解説します。

Sass（サス）とSCSS（エスシーエスエス）CSSをより便利に扱うことができる構文【基礎知識】-STEP1Sass（サス）はCSSを効率よく書くことができる言語記法です。 「Syntactically Awesome Style Sheet」の略で構文的に素晴らしいスタイルシート。 素晴らしいネーミングセンス。 SassにはSass記法とSCSS記法の2種類に分けられています。主に使われているのはSCSS記法。...

SCSSの疑似要素

入れ子構造 1（:hover）

See the Pen SCSS :hover by pull-design (@design90806871) on CodePen.

CSSの:hoverはセレクタ:hoverでCSSを記述しますが、SCSSの場合は&:hoverに書き換えます。

SCSSの入れ子構造でaを&に変更書き換えます。

この&:hoverはa:hoverと同じ扱いになり、CSSの擬似クラス:link・:visited・:activeなどは&を使用して適応させます。

入れ子構造 2（class）

See the Pen SCSS-ボックス by pull-design (@design90806871) on CodePen.

通常のCSS記述だと上の階層からclass+div+classと指定していきますが、SCSSではdivの部分を&に置き換えて記述できるのでコード数が極力減らすことができます。

階層をわかりやすくするポイントはインデントをいれて視覚的に階層がわかれているように見えるようにコーディングすればSCSSでのコーディングがはかどります。

次の章では、変数の使い方について解説します。

SCSS（エスシーエスエス）CSSをより便利に扱うことができる構文【変数】-STEP3変数は$変数名 : 値 ;の形で記述します。 変数はCSSプロパティの値を入れておいて共通化したり、一時的に保存しておいていつでも取り出しが可能です。SCSSを使いこなすうえで重要な機能です。...