0%

Programmingプログラミングナレッジ

Posted:2020.05.12

Ruby SassからDart SassへSassの環境を移行させるまでの流れ

当メディアサイトでもSassのインストールにはRuby製のRuby Sassを使った方法を紹介していますが、Sassの公式サイトでは、Ruby Sassの開発が随分前に止まっており既に廃止されている状況とのこと。公式サイトにも下記のようにアナウンスされています。

 

“ Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. It’s no longer supported, ….. ”

 

基本的にはGulpでnode製のSassを使うことが多いのですが、ちょうど機会があったので、このタイミングでRuby Sassに代わって推奨されている「Dart Sass」へ移行させましたので、それまでの流れを残しておきたいと思います。

 

移行前はこのようにRuby Sassが使われていました。ここからDart Sassに移行していきます。

$ sass -v
Ruby Sass 3.7.4

 

まずは、Homebrew経由でDart Sassをグローバルにインストールしていきます。下記のコマンドを実行します。

$ brew install sass/sass/sass

 

Ruby Sassが使われている場合には、下記のようにエラーメッセージが出ます。内容としては、既にRuby Sassで使われていたSassの実行ファイルが存在していることが問題のようです。

Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink bin/sass
Target /usr/local/bin/sass
already exists. You may want to remove it:
 rm '/usr/local/bin/sass'

 

そこで下記のコマンドによって、該当のSass実行ファイルに対してシンボリックリンクとして上書きします。このようにすることで、Dart Sassが使えるようになります。

$ brew link --overwrite sass

 

シンボリックリンクを上書きしたら、実際にDart Sassに変わっているかを確認してみます。ちなみに、Dart Sassでは「-v」のコマンドオプションが使えないので下記のようにします。

$ sass --version
1.26.5

 

バージョンが変わっており、Ruby SassからDart Sassへの移行が完了したことが確認できますね。もし、これで変わっていない場合には、「.bash_profile」にて直接、Dart Sassへの環境変数のパスを通してあげると使えるようになります。

【.bash_profile】

export PATH=/usr/local/Cellar/sass/1.26.5/bin:$PATH

 

.bash_profileファイルの編集時には、下記のコマンドで編集内容を適用させることを忘れずに。

$ source ~/.bash_profile

 

念の為、下記のコマンドでSassの実行ファイル参照先を調べて、Rubyでインストールしたものになっていないかどうか確認しておくといいですね。「/usr/local/Cellar/」にはHomebrewでインストールしたパッケージが入ります。

$ which sass
/usr/local/Cellar/sass/1.26.5/bin/sass

 

Dart Sassの使い方ですが、Ruby Sassと同じように各コマンドやオプションが使用できますので、移行後もこれまで通り開発を進めることができます。

$ sass --watch before.scss after.css

 

Ruby Sassはあまり使う機会もなく、長らくほったらかしにしておりましたが、ちょうどDart Sassに移行する機会があったので良かったです。Ruby Sassをお使いの方は忘れずに是非試してみてください。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】