このサイトからの通知を受け取りますか?

ニュース




2022/08/28

Visual Studio CodeでSassを使ってみた

ホームページ・ブログを作成するとき、私が使用しているのはMicrosoftが無料でリリースしている「Visual Studio Code」を使用しています。

今回は、Visual Studio CodeでSassを使ってコーディングするための初期設定方法をご紹介していきたいと思います。

SassはCSSを拡張したメタ言語のこと、CSSをより便利に記述するための言語です。

CSSよりもコードの記述を短く済ませることができ、それによって作業効率の向上と管理しやすいコードを記述することができます。

SASS記法やSASSファイルと書かれていることが多く、Sassの2つの記法のうちの一つです

上記と同じくSCSS記法やSCSSファイルと書かれていることが多く、Sassの2つの記法のうちのよく使われている記法です。

Visual Studio Codeとは?

Visual Studio CodeはMicrosoftが提供するプログラミング、コーディング用のテキストエディタです。拡張機能を簡単に追加することができたり、初心者にも扱いやすいという理由で多くの人に使われている人気のツールです。

Sassとは「CSSのメタ言語」と呼ばれるもので、CSSをより効率的に記述するための言語です。CSSよりもコードの記述を短く済ませることができます。

規模の大きいいWEB制作はCSSをそのまま記述していることはあまりなく、Sassで記述している場合がほとんどです。

ただし、ブラウザーで理解できるのは、CSSなのでSassはコンパイルという処理によってCSSに変換します。

システムにあまり詳しくない人にとってはSassをコンパイルするための環境構築に時間がかかる場合があります。

しかし、Visual Studio Codeであれば手軽に環境を作ることができるため、初心者の方でも簡単にSassによるWebコーディングを始めることができます。

VS CodeでSassをコンパイルする方法

Visual Studio Code でSassを自動でコンパイルするための環境を作る方法をご紹介していきます。

以外と簡単で以下の二つを実施します。

  1. Visual Studio Codeのインストール
  2. Live Sass Compilerのインストール

PCに Visual Studio Code が入っていない場合は、まずインストールしましょう。

Visual Studio Code は公式サイトから無料でダウンロードしてインストールすることができます。

Mac、Windowsのどちらも対応しています。下記のページからインストールしてください。Visual Studio Code

Live Sass Compilerのインストール

Visual Studio Code を開き、下記の番号順に操作します。

コーディングとコンパイル

Visual Studio Code でファイルを新規作成し、scssのコードを入力し保存します。

Watch Sassを押すと、自動でcssが生成されます。

プロフィール

運営者 HONDA

福島県在住、50代です。40代に比べると体が疲れやすくなったと実感している今日このごろ..

WBEシステム開発の勉強を兼ねて本ブログを開設しました。

ブログはこう書くべきを無視して自分の興味あるプログラムを「作っては見直し」「作っては見直し」しています。

最近は、SNSの自動化に力を入れてます。X、Instgram、LINEなどの自動化のご相談を承っております。どうぞよろしくお願いいたします。

趣味:家族旅行

メルマガ登録

カテゴリ

SMART PAGE

SNS連携、WEBシステム

お任せください。

時計表示

都道府県

センサース許可

センサースクロール

音声発話

音声種別

プッシュ通知

スクリーンセーバー起動時間

デバッグ

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。

本日の日の出・日の入り(東京基準)


西暦和暦干支年齢対応表