Sass一覧

Sassのインポート @import

CSSでは@importを使用して、外部のCSSファイルをインポート(読み込む)ことができます。 SassでもCSSと同様に、...

記事を読む

SassをCSSにコンパイル(変換)する環境をVisual Studio Code(VSCode)で作成する

Sassでコーディングしたスタイルは、そのままではブラウザーで読み込むことができないので、CSSに変換する必要があります。 S...

記事を読む

Sassで演算を行う

CSSで横幅(width)や余白(padding)などのサイズを指定する際に、特定の要素のwidthプロパティの値から、paddin...

記事を読む

Sassで変数(Variables)を扱う

プログラムでは変数に値を格納しておくことで、その値を複数の箇所で共有することができます。 CSSでは変数を扱うことができません...

記事を読む

Sassで使えるコメントとコンパイル結果

CSSでは/*で始まり、*/で終わる部分がコメントとして扱われます。 CSSのメタ言語(CSSプリプロセッサ)であるSassも...

記事を読む

Sassでプロパティのネスト(Nested Properties)を使用する

Sassでルールのネストをする方法については、前々回に紹介しました。 Sassではルールセットのネストだけではなく...

記事を読む

Sassで親セレクタの参照を行う &(アンパサンド)

前回はルールのネストについて紹介しました。 ネストを使ってスタイルを記述していると、親のセレクタを参照したい時がありま...

記事を読む

Sassでルールのネスト(Nested Rules)を使用する

ルールのネストは、Sassを記述する上で、最も使用する機能です。 Sassではルールをネストできることで、スタイル(CSS)をHT...

記事を読む

ブラウザー上でSassをCSSに変換できるWebサービス SassMeister

Sassを使うと変数の使用やコードの再利用、条件分岐などのプログラム的な制御構文の利用をすることができます。 Sassを利用するこ...

記事を読む