会員限定 ブラウザで表示

• Sassをコンパイルして、ブラウザに反映
• Sassをコンパイルして、ブラウザに反映させよう！

Sassをコンパイルして、ブラウザに反映

このステップでは、Sassをコンパイルしてブラウザに反映させる方法について学びます。
前ステップで学んだSCSSの基本的な書き方を活用し、実際にブラウザでその表示を確認してみましょう。

Sassをコンパイルして、ブラウザに反映させよう！

Sassをブラウザに反映させる手順

1. 新しいHTMLファイルを作成し、HTMLを記述しよう
   Finderでフォルダを新規作成し、Visual Studio Codeを起動してください。
   その後、新しいHTMLファイルを作成し、下記のHTMLを記述しておきましょう。

   See the Pen 3523_ブラウザで表示_001 by Yugo Harima (@yh-dezadezi) on CodePen.

   HTMLを記述後、保存してブラウザで表示を確認しましょう。
2. 新しいSassファイル、CSSファイルを作成しよう
   HTMLファイルと同フォルダ内に新しいSassファイルとCSSファイルを作成しましょう。
   
3. CSSファイルをタグで読み込ませよう
   index.htmlを開き、タグ内にタグを記述して外部CSSを読み込ませます。
   
4. Sassファイルにスタイルを記述しよう
   先ほど作成したSassファイルに、下記のスタイルを記述しましょう。

   See the Pen 3523_ブラウザで表示_002 by Yugo Harima (@yh-dezadezi) on CodePen.

5. Sassファイルをコンパイルする
   ターミナルを起動し、コンパイルするための下記コマンドを実行してください。

   sass style.scss style.css

   
6. ブラウザで表示を確認する
   記述したSassがブラウザで反映されているか確認していきましょう。
   下記のようにブラウザが表示されていれば完了です。