Ubuntu 16.04 / Sassのインストール方法

Ubuntu 16.04 にレガシー Ruby Sass をインストールするには、APT から ruby-sass パッケージ、または RubyGems から sass ジェムを使用できます。ただし、Ruby Sass はサポートが終了した実装です ので、既存プロジェクトを再現する場合にのみ検討するべきであり、新しい開発環境には、現在サポートされている OS と Dart Sass を使用してください。gem 経由でのインストールでも最新の Dart Sass はインストールされません。

インストール前に実装とOSのサポートを確認する

Sassは、変数やネストされたルールを使って書かれたスタイルシートをCSS（カスケーディングスタイルシート）に変換するツールです。SCSSは中括弧を使用するCSSに似たSassの構文で、ファイル拡張子は.scssです。同じコマンド名sassを使用していても、Ruby SassとDart Sassは異なる実装です。

公式のSassガイドによると、Ruby Sassは2019年にサポート終了となりました。Ubuntu 16.04も標準サポートと拡張セキュリティメンテナンス（ESM）の両方が終了しており、2026年10月現在、追加のセキュリティサポートが必要な場合、Ubuntu ProのLegacyアドオンサービスの条件を確認する必要があります。OSサポートの範囲についてはCanonicalのUbuntu 16.04ガイドで確認できます。

まず、ソースコードと既存のCSSをバックアップし、プロジェクトのGemfile.lock、package.jsonなどで使用されている実装やバージョンを確認してください。以下の2つの古いインストール方法はどちらも代替手段であるため、両方をインストールする必要はありません。

APTでレガシーRuby Sassをインストールする

Ubuntu 16.04で使用された配布パッケージを再現するには、次の順序でターミナルで確認してください。sudoを実行できるアカウントと、正しく動作するAPTリポジトリへのアクセスが必要です。

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

apt-cache policy の Candidate フィールドには、インストールのために選択されたパッケージのバージョンが表示されます。候補がない場合やアップデートが失敗した場合でも、インストールが可能であると判断しないでください。まずリポジトリ設定、ネットワーク、および環境のサポート状態を確認してください。パッケージが見つからないからといって、リポジトリを勝手に追加したり、署名検証を無効にしたりしないでください。

インストール後、Sass のバージョンが表示されるはずです。配布パッケージのバージョンは gem のバージョンと異なる場合があり、以前の記事で示した Sass 3.4.23 (Selective Steve) は過去の出力例です。現在のインストール結果が必ずしもその文字列と一致する必要はありません。

必要な旧バージョンをRubyGemsでインストールする

これは既存のプロジェクトで Ruby Sass gem が必要な場合に確認する方法です。以下は 3.7.4 を指定した例であり、プロジェクトで異なるバージョンが必要な場合は、その要件を優先してください。RubyGems Sass 3.7.4 情報 は Ruby 2.0.0 以上が必要であることを示していますが、この条件だけでは、すべての依存 gem が古い Ruby バージョンにインストールできるわけではありません。

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install は、システム全体ではなくユーザー gem ディレクトリにインストールするオプションです。実行可能ファイルが見つからないという警告が表示された場合は、RubyGems ユーザーインストールガイド を参照し、ディレクトリの bin を PATH に追加してください。Bash では、次のコマンドを現在のターミナルに適用し、その後に確認できます。

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

この設定を今後も使用する場合は、上記の export 行を ~/.bashrc に一度追加し、新しいターミナルで確認してください。元に戻す場合は、追加した行を削除してターミナルを再度開いてください。インストールに失敗した場合は、エラーに表示される依存する gem と Ruby のバージョンを確認し、プロジェクトに保存されているロックファイルおよびその時点の環境に基づいて環境を再現してください。証明書や TLS エラーを解決するために HTTPS 検証を無効にしないでください。

SCSS を CSS に変換してインストールを確認する

単にバージョンを表示するだけでは、実際の変換は確認できません。別の空の作業フォルダで style.scss ファイルを作成し、以下の全内容を保存してください。既存のファイルがあるフォルダでは、まず既存のサンプルファイル名と競合がないことを確認してください。

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

そのフォルダで以下のコマンドを実行すると、style.cssが生成されます。

sass style.scss style.css

生成されたCSSには、以下のセレクターと値が含まれている必要があります。実装方法や出力フォーマットの設定によっては、スペースや改行、ソースマップコメントが異なる場合があります。

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

色の値を変更して再度変換し、CSS内の値が変わるかどうかを確認することで、入力ファイルと出力ファイルの関係を確認できます。元の値に戻して再度実行すると、例の状態が復元されます。Sass変換はCSSファイルを作成するプロセスであり、ウェブページに適用するには、対応するHTMLで出力されたCSSを読み込む必要があります。

コマンドが競合した場合やインストールを元に戻す必要がある場合

インストール後にsass: command not foundが表示された場合、インストールが成功したかどうかを確認し、PATHを確認してください。期待したバージョンと異なるものが表示される場合は、どの実行ファイルが最初に選択されるかを確認してください—APT、ユーザーのgem、または他のツールでインストールされたものかどうかです。

command -v sass
type -a sass
sass --version

ユーザーのgemのbinをPATHの先頭に置くと、そのコマンドが優先される場合があります。APTとgemで重複したインストールがある環境では、単にバージョン番号を見るだけでなく、パスも記録してください。ファイルを任意に削除するのではなく、インストールに使用した管理ツールを使って削除してください。

• APTインストールを元に戻すには、sudo apt remove ruby-sassを使用します。実行する前に、削除される項目のリストを読み、他のプロジェクトで使用中でないことを確認してください。
• 上記の例でユーザー用のgemを削除するには、gem uninstall --user-install sass -v 3.7.4を使用してください。他のバージョンや共有依存関係を一括で削除する必要はありません。
• エラーが互換性のない最新のSCSS構文によって引き起こされている場合、単に再インストールするだけでは解決しないことがあります。プロジェクトで必要な実装でビルドするか、コードを確認してDart Sassに切り替えてください。

新しい環境でDart Sassに切り替える

Sassの現在のリファレンス実装はDart Sassです。公式のインストールドキュメントは、オペレーティングシステムとCPUに適したスタンドアロン配布版またはnpmを使ったインストール方法を案内しています。このセクションのnpmの例は、対応するSassバージョンで必要なNode.jsとサポートされているオペレーティングシステムを使用して準備された別の開発環境で実行する手順であり、Ubuntu 16.04のデフォルトのNode.jsでの実行を前提としていません。

Node.jsとnpmの準備が整ったら、新しいプロジェクトフォルダーで以下のコマンドを使用してプロジェクト固有の開発依存関係をインストールできます。既存のプロジェクトに適用する場合は、まずpackage.jsonとロックファイルをバックアップし、その後既存のビルド設定を確認してください。

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

最後のコマンドを実行する前に、前のセクションのstyle.scssを同じフォルダに保存する必要があります。npx sassは、この手順でインストールされたプロジェクトローカルのSassを使用しており、グローバルのsassコマンドやバージョンとは異なる場合があります。npm ls sassと生成されたCSSでインストール結果を確認できます。この例で追加された開発依存関係は、npm uninstall --save-dev sassで削除できます。

古いプロジェクトを移行する場合は、テストブランチやコピーで変換結果を比較し、適用する前にCSSの差異や警告を確認してください。単一ファイル変換のコマンドとオプションは、Dart Sassコマンドラインドキュメントで確認できます。Ruby Sassをインストールすることと、現在のDart Sassへ移行することは別の作業です。