PhpStorm 7 等の StylusとCompassサポート

PhpStorm 7 Web Toolkit Series - Stylus and Compass SupportWebの開発においてCSSを書く方法は今非常に多彩な選択しがあります。LessSassSCSSが有名ですが最近はStylusというものも登場しました。CSSに変数やミックスイン、オペレーションや関数を導入できるものです。またSassをベースにしたCompassというものも登場しています。

JetBrainsのIDEはすでにLess、Sass、SCSSをサポートしてきましたが、PhpStorm 7、WebStorm 7、AppCode 2.5、PyCharm3.0、そしてIntelliJ IDEA 13(年末リリース予定)はStylusCompassをサポートします!

本エントリの対象製品:IntelliJ IDEAPyCharmWebStorm, PhpStormRubyMineAppCode

This functionality is available in IntelliJ IDEA, PyCharm, WebStorm, PhpStorm, RubyMine and AppCode.

Less、Sass、SCSSのシンタックスハイライト、コード補完、Sructureビューはデフォルトでサポートしており、StylusについてはStylus support pluginIDE Settings | Plugins, Install JetBrains plugin…よりインストールする必要があります

.less.sass.scss.stylファイルをプロジェクトに追加するとファイルウォッチャによる自動コンパイルが有効になります。ファイルに変更を加えると自動的にコンパイルが行われCSSに変換されます。なお、コンパイラは別途インストールしておく必要があります。NPM:Node.js Package Manager (Project Settings | JavaScript | Node.js)よりインストールすることができます。

Using Stylus in PhpStorm for writing CSS

Compass連携についてはProject Settings | CompassよりCompass の実行パスと設定ファイルを指定し設定できます。

Compass support

是非、お試しの上掲示板YouTrackへフィードバックをお寄せください。

Develop with pleasure!

– JetBrains PhpStorm チーム

This entry was posted in AppCode, IntelliJ IDEA, PhpStorm, PyCharm, RubyMine. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *