模写修行メディア

Dart SassをVSCodeの拡張機能(プラグイン)で利用する方法を紹介

Sassでは現在、これまで多くのシェアを誇っていたLibSassに代わり、Dart Sassが推奨されています。

Dart Sassのファイルをコンパイルする方法はいくつかありますが、この記事では、VSCodeの拡張機能を利用した方法を紹介します。

注意!
Sassには2つの記法がありますが、この記事ではSCSS記法を使っています。

Dart Sassとは

Dart Sassは、Dart製のSassです。

  1. Ruby Sass
  2. LibSass
  3. Dart Sass

Sassは上の順で発展してきました。現在、Ruby Sassはサポート終了、LibSassは非推奨となり、Dart Sassが推奨されています。

Dart Sassでは、新モジュールシステムの導入など、これまでSassが抱えていた問題に取り組み、多くの面で最適化された形になります。

大きな変更点としては、これまで分割したファイルを読み込む際に利用していた@importが廃止となり、新たに導入されたモジュールシステムの@use, @forwardが採用されています。(この記事では具体的なSassの文法には触れず、コンパイル方法について紹介します)

Dart Sassのコンパイル方法 (scssファイルが1つの場合)

まずはscssファイルが1つの場合のコンパイル方法を紹介します。つまり、存在するscssファイルはstyle.scssのみで、style.scssをコンパイルしてstyle.cssを作る方法です。

scssファイルが複数ある場合は、次のセクションで紹介します。

  1. DartJS Sass Compiler and Sass Watcherをインストールする
  2. DartJS Sass Compiler and Sass Watcherの設定をする
  3. 実際に試してみる

上の順に紹介します。

Step1:DartJS Sass Compiler and Sass Watcherをインストールする

DartJS Sass Compiler and Sass Watcherのインストール画面

VSCodeの拡張機能DartJS Sass Compiler and Sass Watcherをインストールします。

Step2:DartJS Sass Compiler and Sass Watcherの設定をする

コンパイルされたファイルをどこに出力するかの設定を行います。それ以外にも色々な設定項目がありますが、詳しくは後述します。ここでは最低限動かすことを目的に進めます。

拡張機能の設定画面表示ボタン

設定は、「拡張機能の設定」から行います。setting.jsonファイルを編集しても設定変更ができるので、興味がある方は調べてみてください。

出力先の指定

コンパイルされたファイルの出力先設定は、「Dartsass: Target Directory」になります。今回はcssフォルダ内に出力したいのでcss/を指定します。

Step3:実際に試してみる

実際に動くか試してみます。

プロジェクトのディレクトリ構成

上の構成でプロジェクトを作成します。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>Dart Sass</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <p class="text">親譲りの<span>無鉄砲</span>で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
    </body>
</html>

index.htmlに上のコードを貼り付けてください。確認用なので、内容はなんでも構いません。

.text{
    background-color: #eeeeee;

    span{
        background-color: #ff0000;
    }
}

style.scssには上のコードを記載してみます。


トランスパイル実行

保存すると自動でコンパイルが行われ、赤枠で囲ったcssフォルダが生成されます。スタイルが適用されているかブラウザでも確認してみましょう。

注意!
上の画像のようにプロジェクト全体をVScodeで開く必要があります。projectフォルダごとドラックしてVScodeアイコン上で離すと、開くことが出来ます。

Dart Sassのコンパイル方法(scssファイルが複数ある場合)

実務では、scssファイルを役割ごとに複数ファイルに分割し、最終的に1つのcssファイルにまとめてコンパイルすることが多いです。

ここでは、scssファイルが複数ある場合のコンパイル方法を紹介します。DartJS Sass Compiler and Sass Watcherのインストールは既に済んでいるものとします。

  1. ファイルの構成を確認
  2. Node.jsとsassをインストールする
  3. DartJS Sass Compiler and Sass Watcherの設定をする
  4. 実際に試してみる

上の順に紹介します。

ファイル数が多いので、ダウンロード出来るようにしました。この記事と同じように試してみたい方は、是非手を動かしてみてください。

Step1:ファイルの構成を確認

ダウンロードしたプロジェクトの構成を紹介します。

フォルダ名役割
globalサイト内共通の設定
foundationリセット CSS とサイト内共通で効かせたいスタイル
utilityちょっとした使いわますスタイル
componentサイト内で使い回すパーツのスタイル
layoutレイアウトを作るスタイル
page各ページ固有のスタイル

各フォルダはこのような役割になっています。

【初心者向け】模写修行流CSS設計を紹介!

なぜこのような分け方にしているかは、CSS設計の話しになるので、興味がある方は上の記事をご覧ください。

各フォルダの中には必ず_index.scssがあります。_index.scssは同じ階層の全ファイルを@use@forwardを使って呼び出しています。

そしてstyle.scssで各フォルダのファイルを@useを使って呼び出しています。正確には各フォルダ内の_index.scssを呼び出しています。

ディレクトリ構成の図

図にするとこのような形になります。@forward@use、ディレクトリ構成に関して、参考になるサイトを載せておきます。

Step2:Node.jsとsassをインストールする

@use, @forwardは、別途sassをインストールしないと使えるようになりません。sassをインストールする際は、グローバルかローカルにインストールします。

インストール場所使える場所
グローバルPC内のどこからでも使える
ローカルそのプロジェクト内(=そのフォルダ内)でのみ使える

※ ローカルにインストールする場合、正確にはそのプロジェクト以外でも使えますが、普通はそのプロジェクトでしか使いません。

グローバルにインストールするとどこからでも使える一方で、複数人で開発する際やプロジェクトによって使うバージョンが違う際は不便です。従ってローカルにインストールすることをおすすめします。

  1. Node.jsのインストール
  2. sassのインストール

sassのインストールは、上の順番で進めます。


💡 Node.jsのインストール

sassのインストールにはnpmを使うので、Node.jsのインストールが必要になります。

npmとはパッケージ管理システムで、Node.jsをインストールすることで使えるようになります。パッケージとは何かなどの説明は省略します。sassをインストールするためにnpmが必要だと思っていただければOKです。

Node.jsのインストールはProgateの記事が丁寧に解説してくれています。

勉強を初めたての方は、ターミナルやコマンドプロンプトを触ることに抵抗があるかもしれませんが、いずれ通る道だと思って、挑戦してみましょう。


💡 sassのインストール

インストール場所コマンド
グローバルnpm install -g sass
ローカルnpm install sass

ターミナルやコマンドプロンプトで開発ディレクトリに移動して、上のコマンドを実行すれば、sassのインストールが始まります。開発ディレクトリへの移動方法は調べてみてください。

Macの方専用ですが、ターミナルに関する参考サイト(YouTube)を載せておきます。Windowsで普段開発はしないので、すみませんがWindowsの方はご自身で調べてみてください。

ローカルに入れると、projectフォルダ内(開発ディレクトリ)にnode_modulesフォルダが生成されます。一旦その中身を気にする必要はありません。その中にsassがあるおかげで動くことだけ、知っておけば良いと思います。

Step3:DartJS Sass Compiler and Sass Watcherの設定をする

DartJS Sass Compiler and Sass Watcherの設定項目は、こちらから確認できます。


💡 Sassバイナリのパスを通す

パスの設定

パスの設定は必須でやらないといけないことです。

設定箇所は、「Dartsass: Sass Bin Path」になります。この設定は、どこにあるsassを使うか指定しているようなものです。

OSコマンド
Macnode_modules/.bin/sass
Windowsnode_modules\\sass\\sass.js

ローカルにインストールした場合、上のように指定すれば良いです。


💡 その他の設定

主要な設定を紹介します。

dartsass.autoPrefixBrowsersList
自動プレフィックスの設定。デフォルトで「全ブラウザの最新の 2 バージョン」が設定されています。詳細は、browserslistから確認できます。

dartsass.disableSourceMap
ソースマップの設定。デフォルトで生成されるようになっています。

dartsass.enableStartWithUnderscores
アンダースコア_で始まるファイルのコンパイルの設定。デフォルトで無効になっています。

dartsass.outputFormat
出力されるcssフォーマットの設定。

項目出力されるファイル
cssonlystyle.css
minifiedstyle.min.css
bothstyle.css と style.min.css

Step4:実際に試してみる

パスの設定

scssフォルダを右クリックし、「DartSass:Sass Watch」を選択すると、そのフォルダ配下がウォッチ(監視)されます。cssフォルダが生成されたら、ブラウザにて表示確認をしてみましょう。

(おまけ) ローカルサーバーを立ち上げて効率的に開発する方法

VSCodeには、さまざまな拡張機能が存在し、それらを利用することで開発の効率化を図ることができます。

ここでは、sassを使うなら一緒に入れておきたい、Live Serverについて紹介します。

Live Serverを使うと毎回ファイルを編集後、表示確認のためブラウザをリロードすることなく、自動でファイルの変更を検知しリロードしてくれます。

※ Dart Sassとは関係ないので、必要のない方は読み飛ばして構いません。

  1. Live Serverをインストールする
  2. ローカルサーバーを起動する

上の順に紹介します。

Live Serverをインストールする

Live Serverのインストール画面

エディタからLive Serverのインストールを行います。

ローカルサーバーを起動する

ローカルサーバーを起動

プロジェクトをエディタで開き、右下の「Go Live」をクリックするとブラウザに遷移し、ローカルサーバーが自動で立ち上がります。

試しにファイルを修正してみてください。ブラウザが自動でリロードし、修正が反映されると思います。

ローカルサーバーが立ち上がった状態で、停止をしたい場合は、右下の「Port:5500」をクリックすればOKです。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Jyuのアイコン

Jyu

空間コーディネーターから独学でプログラミングを学びwebの世界へ。とにかくコーディングが好き。普段は【HTML・CSS / JavaScript / React】を主に書いています。

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材