ウェブ

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

sass疑似要素アイキャッチ画像

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

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

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

SCSSの疑似要素

:hover
:hover

入れ子構造 1(:hover)

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

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

CSS
CSS
SCSS
SCSS

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

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

1
2
3

入れ子構造 2(class)

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

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

入れ子&
入れ子&

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

&がdivの変わり
&がdivの変わり

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

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