mixinで@ifの条件分岐を利用して疑似要素を表示

mixinで@if（条件分岐）を利用して、疑似要素にグラデーションの点線ボーダーを表示します。mixinの設定は以下になります。 デフォルトの設定として要素の上…

ローカル変数をスタイルセットの外側で使用

通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参…

@contentを利用してmixinにスタイルセットを渡す

mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述（スタイルセット）を@contentが書かれた場所で展開します。 以下はhove…

@extendのプレースホルダーセレクタを利用

@extend専用のプレースホルダーセレクタは「%セレクタ名」のように記述します。@extendのプレースホルダーセレクタはCSSとして生成されません。 以下の…

Sassの@import

CSSの@importは以下のいずれかを記述します。 style.cssからabout.cssを読み込んでいるので、htmlではstyle.cssのみ読み込みま…

16進数のRGB値に透明度を指定

CSSでは16進数のRGB値に透明度を指定することはできません。例えば以下のような指定はエラーになり、背景色が適用されません。 Sassではrgba();という…

@at-rootによるルートへの書き出しと@keyframes

通常通りSassをコンパイルした場合、ネストされたルールセットをルートに書き出すことはできません。 コンパイル後のCSSは以下のようになります。 クラス名con…

CSSアニメーション

mixinでfont-sizeとletter-spacingを設定

htmlタグやbodyタグにfont-sizeの基準値を何も設定していない場合、1emを指定すると16pxで表示されます。20pxで表示したい場合は、20px …

プロパティに変数でマイナス値を設定

プロパティに変数でマイナス値を設定するケースです。例えばマイナスmarginを設定する場合、値が単独の場合は以下のように記述すれば問題ありません。 ですがプロパ…

インターポレーションの利用

インターポレーションは変数が参照できない場所でも使うことができるようにする機能です。通常Sassの変数はプロパティ値から参照して使用します。この場合インターポレ…

Koalaで発生したコンパイルエラーの対処法

Koalaで発生したコンパイルエラーの対処法です。発生したエラーはログから確認できますが、Koalaの起動を終了するとエラーログは消去されます。 Argumen…