Sublimetext3にSassとCompassを導入してみた。Sublimetext3にSassとCompassを導入してみた。ライセススタッフが書くブログ。Sublimetext3にSassとCompassを導入してみた。オハヨォアルファブロガーめざして頑張ります!そもそもSassってなんだかよく分からなかったのですが、業界界隈では便利だ!という声がたくさん上がっていたのでとりま団長も頑張って使えるようにしてみました。10.8.5ではCompassがすんなりインストールできなくて難しかったです、有益な情報を発信してるブロガーの皆様のおかげでなんとかインストールできた感じです。忘備録も兼ねて、インストールまでつまづいたポイントなどを解説(書き殴りともいう)していきたいと思います。それこそ設定を開始してから10分ほど・・・)今回の記事の目的は、Sublimetext3でSassを編集し、自動でコンパイルされたcssが出力する、です。実は自動というのは嘘なんですけど←Sublimetextでショートカット1発で生成されるが正しいです。GUIを使う方法もありますが、実際KoalaというSassをコンパイルしてくれるアプリを使ってみたらスマートじゃないのですね、効率的に。出来るには出来る、けど1回別のアプリケーション噛まさないといけないってのが引っかかりました。SublimetextでSass書いてるんだからそのまま直で投げれた方が憧れた。一度Compassのインストールを試す。実際にSublimetext3でコンパイルしてみるSassとは?ざっくりいうとCSSのパワーアップ版でしょうか。加えて変数や関数、CSSクラスの入れ子構造(ネスト)なども使用できるすごい。格安イラスト制作ならEagleGraohics(イーグルグラフィクス)Compassとは?SASSをもとにかかれたフレームワークの事。-v入力後rubyのバージョンが表示されれば無事にインストール出来ています。-vCompassインストールできません・・・エラーが出た人アンラッキー。団長も出ました(汗)結果的には手探りで試行錯誤のしていて出来たんですよ!ターミナルなんて半年に1回触るか触らないかの人間にもかかわらず!エラーが出た人は下記を参照してみて下さい。ToolsをインストールすればCompassインストール出来ちゃうよとの事。いや〜有り難い!何度も参考にさせて頂きました。Toolsをダウンロードする。10.8.5なのでcommand_line_tools_os_x_mountain_lion_for_xcode__october_2013をダウンロード&インストール。試していたのでついでにxcode_5.1.1も同様にダウンロード&インストールしちゃいました。xcodeも必要なのかどうかはちょっとわからない、なぜなら同時期にインストールしてしまったから。先にcommand_line_tools入れて駄目ならxcodeもインストールしてみると良いかもです。command_line_tools_os_x_mountain_lion_for_xcodeと書いてありますから、何となくxcodeも必要じゃね?と勘ぐれますけど。売上100万円??!!最安49800円のLINEスタンプ製作!!もう一度Compassのインストールを試す。-v出来ました・・・?出来ない人がいたら土下座します・・・orz生まれて来てすみません。)m超簡単!自分で「凄いバナー」が作れる!【バナープラス】Sublimetext3の設定SassとCompassをインストールしただけでは終わりではなく、Sublimetext側にも必要なパッケージインストールしてなおかつ、内部ファイルの記述を書き換える必要があります。選択compassをクリックするとFinderでConpassのシステムファイルが見れます。Compass.sublime-buildのファイルを開き下記を2行目あたりに追加します。スプレッドで提供中!実際にSublimetext3でコンパイルしてみるここでまたコンパイルするための準備が必要です。config.rbというものが必要で、このconfig.rbの中にCompassの設定を記述する必要があります。sublimeでconfig.rbという名前のファイル作成をして、下記を記述してください。falseそして作成したconfig.rbの置くディレクトリですがここでは下記の通りにしてください。実際運用する際などはconfig.rbの設定を変更しルートを各々設定してあげるのが良いと思います。green;}a:hover{color:yellow;}}}cmd+bを押すと即座にSassファイル(style.scss)がコンパイルされます。使い方は日々勉強中なのですノシ次の記事スタッフブログを更新しました。繁体字フォントWebを作るのは人。INFORMATIONraisez(ライセス)に興味を持った方は、是非チェックをしてください。NEWS2019/4/3納品情報:ミラクルサッカースクール様2019/2/1納品情報:DISIT様NEWS一覧RECOMMENDEDWebを楽しむのは人。CONTACTWeb制作、Webビジネスのご相談はお気軽にご連絡ください。Reserved.お問い合わせTOPへ戻る。