コース一覧

Sassのインストール

  • Sassのインストール
  • インストールしてみよう!
  • 関連リンク

Sassのインストール

今回は、Sassのインストールを行います。
Sassにはいくつかの実装がありますが、その中からDart Sassをインストールします。

Dart Sassを使用する理由は、現在(2024年時点)の標準実装で、公式にサポートされている唯一のバージョンだからです。現在もSassチームが継続的にメンテナンスを行っており、最新の機能やCSS標準に対応しています。

一方、他の実装であるNode-SassRuby Sassは開発が終了しており、非推奨となっています。

そのため、Dart Sassを使用することが推奨されており、デザデジでもDart Sassをインストールしていきます。

インストールしてみよう!

デザデジでは、Macを使用しているためDart Sassの公式に載っているMac OS X用のインストール方法を使ってDart Sassをインストールしていきます。
それでは、ターミナルを開いてインストールの準備を始めましょう。

インストールの手順

インストールは以下の順で進めて行きます。

  1. Homebrewのインストール
  2. Dart Sassのインストール

1. Homebrewのインストール

  1. インストール用のコマンドをコピーし、ターミナルに貼り付けて実行します。
    WebブラウザーでHomebrewの公式サイト(https://brew.sh/ja/)へ行きます。
    インストール用のコマンドをコピーし、ターミナルに貼り付けて実行します。
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    ※最新は異なっている場合があるので、Homebrewの公式サイト(https://brew.sh/ja/)でコマンドをコピーしてください。
  2. 現在ログインしているユーザーのパスワードを入力します。
    コマンドを実行すると、ターミナルでパスワードの入力が求められます。
    Macのログインパスワードを入力してください。
    ==> Checking for `sudo` access (which may request your password)... Password:
    ※この時、打った文字は表示されていませんが、入力はされているので打ち間違えに注意しましょう。
  3. 以下のメッセージを確認し、Enterキーを押してください。
    ==> The Xcode Command Line Tools will be installed. Press RETURN/ENTER to continue or any other key to abort:
    ※出力されない場合は、心配せず次に進みましょう。
  4. インストールの成功
    以下のように「 ==> Installation successful! 」が出たらインストール成功です。
    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!
  5. PATHの設定を行います。
    Homebrewが正しく動作するためには、パスを設定する必要があります。
    下記のメッセージにある「 ==> Next steps: 」のセクションの指示に従って、2つのコマンドを実行します。
    以下を実行しないと、パスが通っていないのでbrewコマンドが実行することができません。
    ==> 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)"
  6. 最終確認を行います。
    最後に、Homebrewが正常にインストールされたかを確認します。
    brew -v コマンドを実行して、Homebrewのバージョン情報が表示されれば、正常にインストールされています。
    % brew -v Homebrew 4.2.8
    これでHomebrewのインストールは終了です。

補足:Homebrewとは

Homebrew(ホームブルー)とは、MacやLinuxのコンピュータにソフトウェアを簡単にインストールしたり、管理したりするためのツールです。
パッケージマネージャーとも呼ばれます。

例えると、「アプリの配達屋さん」のような存在です。
例えば、Dart Sassをインストールしたいとき、Homebrewに「Dart Sassをください」と頼むだけで(コマンドを一つ実行することで)、インターネットから自動的にインストールしてくれます。

これにより、手動でソフトを探してインストールする手間が省ける便利なツールです。

2. Dart Sassのインストール

  1. Dart Sassをインストールします。
    Dart Sassをインストールするため、ターミナルに以下のコマンドを入力して実行します。
    % brew install sass/sass/sass
    このコマンドを実行することで、Dart Sassがインストールされます。
  2. インストールの確認
    インストールが完了したら、Dart Sassが正しくインストールされたかどうかを確認します。
    以下のコマンドを実行して、Dart Sassのバージョンを表示します。
    % sass --version 1.81.0
    バージョン番号が表示されれば、Dart Sassが正しくインストールされていることが確認できます。

以上が、「Sassのインストール」についての説明でした。

また、「sassの環境準備」のステップも全て完了となります。
引き続き、別のステップも進めていきましょう。

関連リンク

Sassコーディング

全 9 動画
  • Sassとは

    04:26
  • ターミナルについて

    05:08
  • Sassのインストール

    04:42
  • Sassの書き方

    02:35
  • ブラウザで表示

    01:58
  • 会員限定変数

    03:38
  • 会員限定@mixin / @include

    03:27
  • 会員限定@extend

    03:51
  • 会員限定演算

    02:54