Sassとは
04:26今回は、Sassのインストールを行います。
Sassにはいくつかの実装がありますが、その中からDart Sassをインストールします。
Dart Sassを使用する理由は、現在(2024年時点)の標準実装で、公式にサポートされている唯一のバージョンだからです。現在もSassチームが継続的にメンテナンスを行っており、最新の機能やCSS標準に対応しています。
一方、他の実装であるNode-SassやRuby Sassは開発が終了しており、非推奨となっています。
そのため、Dart Sassを使用することが推奨されており、デザデジでもDart Sassをインストールしていきます。
デザデジでは、Macを使用しているためDart Sassの公式に載っているMac OS X用のインストール方法を使ってDart Sassをインストールしていきます。
それでは、ターミナルを開いてインストールの準備を始めましょう。
インストールは以下の順で進めて行きます。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
※最新は異なっている場合があるので、Homebrewの公式サイト(https://brew.sh/ja/)でコマンドをコピーしてください。==> Checking for `sudo` access (which may request your password)... Password:
※この時、打った文字は表示されていませんが、入力はされているので打ち間違えに注意しましょう。==> The Xcode Command Line Tools will be installed. Press RETURN/ENTER to continue or any other key to abort:
※出力されない場合は、心配せず次に進みましょう。Warning: /opt/homebrew/bin is not in your PATH. Instructions on how to configure your shell for Homebrew can be found in the 'Next steps' section below. ==> Installation successful!
==> Next steps: - Run these two commands in your terminal to add Homebrew to your PATH: (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/xxxx/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)" - Run brew help to get started - Further documentation: https://docs.brew.sh
1行目:パスの設定を追加するコマンド(xxxxには現在実行しているユーザー名が記載されています。)
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/xxxx/.zprofile
2行目:すぐに現在のターミナルセッションでパスを有効にするコマンド
eval "$(/opt/homebrew/bin/brew shellenv)"
% brew -v Homebrew 4.2.8
これでHomebrewのインストールは終了です。Homebrew(ホームブルー)とは、MacやLinuxのコンピュータにソフトウェアを簡単にインストールしたり、管理したりするためのツールです。
パッケージマネージャーとも呼ばれます。
例えると、「アプリの配達屋さん」のような存在です。
例えば、Dart Sassをインストールしたいとき、Homebrewに「Dart Sassをください」と頼むだけで(コマンドを一つ実行することで)、インターネットから自動的にインストールしてくれます。
これにより、手動でソフトを探してインストールする手間が省ける便利なツールです。
% brew install sass/sass/sass
このコマンドを実行することで、Dart Sassがインストールされます。% sass --version 1.81.0
バージョン番号が表示されれば、Dart Sassが正しくインストールされていることが確認できます。以上が、「Sassのインストール」についての説明でした。
また、「sassの環境準備」のステップも全て完了となります。
引き続き、別のステップも進めていきましょう。
Sassコーディング
全 9 動画