SassインストールとPhpStormの設定(Mac) : CSS

Pocket

SassをMacにインストールしてPhpStormから実行できるよう設定。

» Sass – Syntactically Awesome Stylesheets

Sassの設定

Sassインストール

sudo gem install sass

Sassコンパイル

style.scssをコンパイルしてstyle.cssを作成。

$ sass style.scss style.css

–styleオプションでフォーマットを指定

$ sass –style expanded style.scss style.css

変更を監視して自動コンパイル

$ sass –style expanded –watch style.scss:style.css

ターミナルからはwatchはctrl + Cで停止できる。
PhpStormはプロジェクトを閉じるときdisconnectするかプロンプト表示が表示される。

watchオプションでエラーがでるとき

WARNING: Listen has fallen back to polling, learn more at https://github.com/guard/listen#fallback.

下記の記事どおりにしたら解決。

sudo gem install listen

sudo gem install –version ‘~> 0.9.1’ rb-fsevent

» 【Sass】ターミナルからwatchオプションでディレクトリ監視した際に警告エラーが出来たときの対処法メモ | バシャログ。

PhpStorm

選択したファイルをwatchオプションを指定して実行する設定。

» WebStorm / PhpStorm から Sass をコンパイルする | Unformed Building

command + , -> IDE Settings -> External Tools

設定は下記の画像参照1

phpstorm_sass

上記を実行後はscssファイルを変更のたびに自動でコンパイルされる。
command + option + Yで同期して確認する。

関連

» gem, npmのメモ FindxFine | Web制作に関するメモ
» WordPressのテーマ作成でStyleDoccoとCompassを使う : WordPress FindxFine | Web制作に関するメモ

  • rubyのインストールディレクトリは下記で調べる

    $ which ruby 

  • 人気記事 はてなブックマーク

    この日記のはてなブックマーク数