Sass導入方法

  • 投稿日
  • 更新日
  • 著者 IF233
  • カテゴリー CSS
  • カテゴリー Web制作

Sass

Sassとは

Scssのメリット

CSSを効率よく書けることや管理、メンテナンスが楽になることがあります。

  • 変数
  • ネスト記法
  • mixin
  • 関数

Sass導入方法

SassはCSSと違いHTMLファイルで読み込めないので、CSSファイルにコンパイルする必要があります。

よく紹介されている、VSCodeの拡張機能のLive Sass CompilerはDartSassに非対応です。

またDartJS Sass Compiler and Sass Watcherという拡張機能もあるのですが、個人的にパスの設定等が難しく感じました。

そこで今回はVSCodeの拡張機能をしようせず、Sassをコンパイルする方法を紹介します。

1）パソコンにNode.jsをインストールする

Node.js公式サイトからダウンロードしインストールします。

インストールされているか、過去にインストールしていたかの確認はコマンドを打つことで調べれます。

Macの場合ですと、ターミナルで行います。

画面上部の虫眼鏡のアイコンで「ターミナル」と検索します。

↓

一応現在のディレクトリを確認します。

pwd
node -v

node.jsのバージョンが分かります。

バージョンが表示されていれば、インルトールされていることが分かります。

2）作業するフォルダ（ディレクトリ）を作成

作成する内容は以下の通りです。

  • sass-lesson（作業フォルダ）
    • src
      • style.scss
    • index.html（任意）

2）VSCodeで作業フォルダにてSassをインストール

▼ VSCodeでターミナルを開く

VSCodeのメニューでターミナルを選ぶと現在作業しているディレクトリにいる状態で開いてくれます。

そのまま作業ディレクトリ上でコマンドを入力します。

▼ npmをインストール

npm init -y

※init…（イニシャライズ）初期化の意味

コマンドを入力するとpackage.jsonが生成されます。

▼ Sassパッケージをインストール

npm install --save-dev sass

コマンドを入力するとnode_modules、package-lock.jsonが生成されます。

package.jsonとは手順を共有することができるもので、料理のレシピのようなものですが、

中身を見るとSassが追加されていることが確認できます。

3）コンパイルする

▼ コンパイルるすためpackage.jsonの内容を書き換えます。

"scripts": {
    "sass": "sass src/style.scss css/style.css"
},

▼ コンパイルする

npm run sass

先ほどpackage.jsonに書いた”sass”を実行したということです。

正常にCSSが生成されました