イマドキのコーダー環境構築2016CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less
PHPStorm10 の File Watcher機能を使って SCSS + Compass のビルド環境をつくる - Qiita
PHPStormのFile Watcher機能を使って、Drupalのテーマで SCSS + Compass のビルドをするための設定方法を紹介します。 前提条件 テーマは、OMEGA4とする。 ※ただし、テーマ配下にconfig.rbが設置されていれば何のテーマでも構いません。 SCSS + Compass のコマンドの実行環境が整備されていること。 ※ruby + gemコマンドにて適宜コマンドのセットアップをお願いします。 実施環境 下のコマンドの組み合わせで実施しました。 「rbenv」「rbenv-gemset」「Bundler」はとくにセットアップしていなくても支障はないです。 Macbook Pro (Retina, 15-inch, Mid 2014) Mac OS X 10.11 El Capitan PHPStorm 10.0.4 Ruby 2.2.5p319 (201
PHPStormのファイルの自動保存機能をオフにして動作を軽くする - Qiita
PHPStorm（IntelliJ）のファイル自動保存機能は、データ喪失を未然に防げるので便利ですが、Sambaなどのリモートサーバ上のディレクトリをマウントしていたり、Grunt Watchでファイル保存をトリガーにビルド実行を行う設定にしている場合、頻繁に保存が走ることになりPHPStormの動作が重くなってしまいます。 そんなときはファイルの自動保存機能をオフにしてしまいます。 実施環境 Macbook Pro 15インチ Mac OS X 10.10 Yosemite PHPStorm 10 Synchronization設定を行う Synchronizationとは、PHPStormから別のアプリケーションにフォーカスを移動したときの動作設定を行う設定画面のことです。 設定画面は、Appearance & Behavior > System Settings > Synchron
PhpStormでSCSS(SASS)ファイルをCompassでコンパイルする方法とMacの場合の注意点
PhpStormでSCSS(SASS)ファイルをCompassでコンパイルする方法とMacの場合の注意点 更新日: 2019/10/18 公開日: 2014/05/17カテゴリー: 開発全般 PhpStormでCompassを動かすまず、プロジェクトフォルダにconfig.rb（Compass用の設定ファイル）を配置します。そして、config.rbを編集して作業パスを設定します。 例えばプロジェクトが以下のファイル構成だった場合。 このディレクトリ構造ならconfig.rbのパス設定はこうなります。 # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"c
PhpStormでCompassを使う | mawatari.jp
思いの外、前回の記事（PhpStormでSass/SCSSを使う）が好評だったので、PhpStormでCompassを使う方法もメモしておきます。Sassを使うのであれば、Compassも使いたいですものね！ WebStormや、その他JetBrains製のIDEでも同様の手順で行けると思いますが、確認はしていません。 Sass/SCSS, Compassに関する解説や、環境構築については、LIGさんの記事にまとめられているので、参考にしてみてください。 CSSの常識が変わる！「Compass」、基礎から応用まで！ – 株式会社LIG 環境 環境は以下の通りです。前回までと変わりありません。Rubyに関しては、今回も、Macに初めから入っているものを使いました。（最新版にアップデートした上で利用するのが望ましいと思います。） ソフトウェア バージョン
PhpStormだけでファイル監視してSASS/SCSSをコンパイルする
準備 PHPStormでファイルの監視はしてくれますが、コンパイル自体は別途環境が必要になりますので、SASSならRuby＆Gemを予めインストールしておきます。 下記記事を参考にしてください。 WindowsにCompassをインストールしてSASS/SCSS環境を構築する File Watchersの追加 メニューの「File」→「Settings..」でSettingsウインドウを開き、左のメニューから「File Watchers」を選択します。 最初は何も項目がないと思いますので、右側の「+」ボタンをクリックします。 SCSSの他にも色々項目が表示されますが、今回はSCSSを選択します。 「Edit Watcher」画面が表示されます。 ここでコンパイラやCSSの書き出し場所の設定などを行います。基本そのままでいいのですが、標準ではSCSSと同階層に書きだされたCSSが出力されてし
grunt.js0.4.0でJSとCompassをコンパイルする - 車輪を再発明 / koba04の日記
Backbone.jsなどを使っていてjsのファイルが増えてくると、公開するときには1つのファイルにまとめたいなぁとか、コーディングスタイルのチェックもしたいなぁと思っていて、そこで何かいいのないかなと思って調べてみると、「grunt.js」がよさそうだったので今更ながら試してみました。 grunt.jsのバージョンは0.4.0です grunt.jsはバージョンによってインターフェイスが違ったりするので注意。 今回は、JSに対してJSHintをやって結合して圧縮することと、Compassのコンパイルをgrunt.jsにやってもらうことにしました。 （他にもテストや自分で作ったタスクを登録できたりもするのですが今回は省略） インストール https://github.com/gruntjs/grunt/wiki/Getting-started ドキュメントにも書いてあるのですが、0.4.0か
SassについてとCompass導入から利用までの簡単な解説 - blog.4uing
SassについてとCompass導入から利用までの簡単な解説 2013-04-09 はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて …はじめに このページではRubyやSassのインストール手順などの初歩的なことや、高度なSassの使用方法についてはほとんど解説されていません。 Sassに興味をもっている方、もしくはすでにSassを使用していて、これからCompassやBourbonの導入を考えている方を主に対象としています。 SassとSCSS SassとはCSS3の拡張であり、ネスト・変数・Mixin・セレクタの継承などの機能が実装されています。以下はその4つの機能を使った、リンクとそのホバー時の色を変更する例です。 $l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Problem file to import not found or unreadable ../../variables/_colors.scss
Compass cannot compile Ohm [#2392841] | Drupal.org
PHPStorm - Run Filewatcher on existing files?