模写修行メディア

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

HTML・CSS

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターやってます 👆

この記事の目次

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アイコン上で離すと、開くことが出来ます。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

👆 メンターは全員現役エンジニア 👆

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：ファイルの構成を確認

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

フォルダ名役割
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です。

独学に限界を感じていませんか？

現役エンジニアによるメンタリングサービス作りました！

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています！

この記事を書いた人

Tatsukiのアイコン

Tatsuki

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

当メディア運営メンバーでメンターやってます！👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材

詳しくはこちら