NetBeans 8でSCSS(Sass)を使ってCSSを効率よく記述しよう

カテゴリ:Web制作タグ:,

みなさんはCSSを書く時にLESSやSCSS(Sass)等のCSS拡張メタ言語を利用していますか?
私は今まで手を出したいと思いつつも、なかなか手を出せないでいました。
今回IDEであるNetBeans 8でSCSSを使っていくことにしましたので導入までを記事にしたいと思います。

この記事の内容

  1. なぜLESSやSassじゃなくてSCSS選んだの?
  2. Rubyのインストール
  3. Sassのインストール
  4. Compassのインストール
  5. NetBeansの設定
  6. 終わりに

なぜLESSやSassじゃなくてSCSS選んだの?

CSSの拡張メタ言語にはLESSそして、SassもありますがなんでSCSS選んだのってことですが…
LESSの書き方だと、Mixinの書き方がCSSのクラスの指定と似ていて紛らわしい、既存のクラス名と被る可能性が0ではない事から見送りました。

次にSassですが、こちらは単純に記法の好みが違っただけです。
インデントで階層を分けるのがCSSっぽくないって事から見送りました。

最近だとSassとSCSSだとSCSSの方が主流というのも見たので、じゃあSCSSにしてみようかって感じです。
なので、別にLESSじゃダメなのかとかそういったことはないです。使いやすいものを使うのが一番だと思います。

Rubyのインストール

Windows環境ではRubyが入っていないので、まずはRubyをインストールすることから始めていきます。
scss-sass-netbeans_01
1.RubyInstaller for WindowsのトップページのDownloadボタンをクリックするかコチラからダウンロードページを表示します。

scss-sass-netbeans_02
2.次にお使いの環境にあったものをクリックしてダウンロードします。
今回はRuby 2.1.4 (x64)を利用します。

scss-sass-netbeans_03
3.ダウンロードしたファイルをダブルクリックしてインストーラーを起動します。
「セットアップに使用する言語の選択」というウインドウが表示されるので、「OK」をクリックします。
※もしも日本語が選択されていなければ選択します。

scss-sass-netbeans_04
4.使用許諾契約書が表示されるので、内容に問題がなければ「同意する」にチェックを入れてから「次へ」をクリックします。

scss-sass-netbeans_05
5.インストールオプションが表示されるので、「Rubyの実行ファイルへ環境変数PATHを設定する」、「.rbと.rbwファイルをRubyに関連づける」にチェックを入れてから「インストール」をクリックします。
※インストール先は特にこだわりがなければデフォルトのままでいいかと思います。
説明が書いてある通りスペースが含まれているフォルダは避けてください。

scss-sass-netbeans_06
6.このような画面が表示されれば、インストール完了です。「完了」をクリックしてインストーラーを終了します。

Sassのインストール

続いてSassをインストールしていきましょう。

scss-sass-netbeans_07
1.スタートメニューから左下にあるプログラムとファイルの検索フォームに「cmd」と入力すると出てくる「cmd.exe」をクリックしてコマンドプロンプトを起動します。

scss-sass-netbeans_08
2.コマンドプロンプトが起動したら念のためRubyがちゃんとインストールされているかチェックするために「ruby -v」と入力してEnterキーを押します。

scss-sass-netbeans_09
3.rubyのインストールが確認出来たら、次に「gem install sass」と入力してEnterキーを押します。
少し時間がかかる場合もあるかもしれませんが、「Successfully installed sass-x.x.x」と表示が出ればOKです。
※x.x.xはバージョン。
これでSassのインストールは完了です。

Compassのインストール

次に続けて入れておくと便利なCompassもインストールしましょう。
※Compassのインストールは必須ではありません。

scss-sass-netbeans_10
1.Compassのインストールも簡単です。「gem install compass」と入力してEnterキーを押します。
少し時間がかかる場合もあるかもしれませんが、「Successfully installed compass-x.x.x」と表示が出ればOKです。
※x.x.xはバージョン。

もしこの際先ほどインストールしたはずのSassとは別のバージョンのもの(古いもの)が一緒にインストールされてしまった場合、
(「gem install compass」をした後の画面に「Successfully installed sass-x.x.x」がある)
まだ安定版ではインストールされているSassに対応していない可能性があります。

その場合は一旦
「gem uninstall compass」と入力してcompassを削除しましょう。
「gem uninstall sass」と入力してSassを削除しましょう。
※「in addition to the gem?」との問いには「y」と入力してからEnterキーを押してください。(削除してもいいかの確認になります。)

その後、再度Sassのインストールからやり直して「gem install compass -pre」と入力してEnterキーを押して開発版をインストールすることが出来るのでお試しください。
それでもダメな場合は素直にインストールされたバージョンのSassを使うしかないので、Sassのインストールでインストールしたバージョンは削除しておきましょう。
※新しいバージョンのSassが使われてエラーになる場合もあるため。

もちろんこれ以外のエラーで動作しない可能性もありますが、その場合はうまく動く組み合わせを探すしかないと思われます。

以上でCompassのインストールは完了です。
※Compassのインストールは必須ではありません。

NetBeansの設定

Sassのインストール(Compassのインストール)まで完了したら、NetBeansでSassが動作するよう設定を行いましょう。
【全体の設定】
scss-sass-netbeans_11
この設定は一度行えばOKです。
1.「ツール」から「オプション」をクリックします。

scss-sass-netbeans_12
2.オプション画面が開くので「その他」を選択後、「CSSプリプロセッサ」にある「Sassパス」の右にある「参照」をクリックして、Rubyをインストールしたフォルダにある「bin」フォルダの中の「sass.bat」を選択します。

「エラー時に出力を開く」、「追加削除の生成(デバッグ)」はお好みに応じてチェックを外すなどしてください。
※特にこだわりがなければデフォルトのままでOKです。

設定が終わったら「OK」をクリックしてオプション画面を閉じます。

この設定は一度行えばOKです。

【プロジェクト毎の設定】
この設定はプロジェクト毎に行う必要があります。
次にプロジェクト毎の設定です。

scss-sass-netbeans_13
1.プロジェクトに「scss」フォルダを作成します。
※場所などはどこでも構いませんが、設定で使用するので場所を忘れずに!

別途CSSの出力先をここで作成しておいても構いませんが、作成しなくても以下の設定を行えば自動で作成されるので問題ないです。

scss-sass-netbeans_14
2.次に「ソース・ファイル」の上で右クリックをすると表示されるメニューの中から「プロパティ」をクリックします。

scss-sass-netbeans_15
3.プロパティ画面が表示されるのでメニューから「CSSプリプロセッサ」をクリックします。

4.「保存時にSassファイルをコンパイル」にチェックを入れます。

5.「入力」には先ほど作成したSCSSフォルダまでのパス、「出力」にはコンパイルしたCSSを出力するフォルダまでのパスを入力します。
※ダブルクリックで値の入力が可能になります。また、ここで指定した出力先がない場合、保存時に自動で作成されます。

6.コンパイラ・オプションにはCSSへコンパイルする際のオプションを指定します。
【Compassを使用する場合】
SCSSファイル内で

という指定をする必要もありますが、こちらのコンパイラオプションにも

とつけてあげる必要があります。
また、出力するCSSのスタイルを指定することも出来ます。

のように

の後に半角スペースを入れて「nested/expanded/compact/compressed」のいずれかを指定します。

出力例は下記のような感じになっています。
【SCSSファイルでの記述例】

【nestedの場合の出力例(デフォルト)】

【expandedの場合の出力例】

【compactの場合の出力例】

【compressedの場合の出力例】

このように出力されるCSSのスタイルを指定することが出来ます。

また、コンパイラオプションは複数指定することが出来ます。間に半角スペースを入れてあげる必要があります。

例えばcompassを使いつつ、出力されるCSSのスタイルはcompressedにしたい場合

こんな感じで指定してあげればOKです。

設定が終わったら、「OK」をクリックして閉じます。

この設定はプロジェクト毎に行う必要があります。

以上でプロジェクト毎の設定は完了です。SCSSファイルの保存時に毎回コンパイルが行われ、CSSファイルとして出力されるようになります。

終わりに

いかがでしたでしょうか?説明は長く感じるかもしれませんが、設定は最初だけなので是非試してみたいけど環境構築がよく分からないっていう方は、参考にサクッと試してみてください!

あとでよむ / みんなにシェアする

このエントリーをはてなブックマークに追加
LINEで送る

コメントをする / みる

コメントを残す

コメントはまだありません。

検索する

カテゴリ一覧

タグ一覧

お知らせ アクセス解析 アプリケーション ゲーム サーバー スニペット プラグイン 動画 日記 Laravelパッケージ Laravel3 Laravel4 Tips Webサービス Webデザイン WordPress

最近投稿された記事

つぶやき

【GIGAZINE読者限定早い者勝ち】無料でDropbox・Googleドライブなどのクラウドを自由自在に同期・一括管理できる「まとめてクラウド」が先着5万人48時間だけゲット可能 - GIGAZINE gigazine.net/news/20151010-…

約2年前

離れていてもコミュニケーションが取りやすい便利なサービス「Remotty」 #remotty remotty.net

約2年前

RT @localdisk: メジャーどころがたくさん / 【セキュリティ ニュース】「WPTouch」など多数のWordPressプラグインに脆弱性(1ページ目 / 全1ページ):Security NEXT security-next.com/057930

約2年前

Javascript フレームワーク「Aurelia」aurelia.io

約2年前

dockerで起動済みのコンテナに対して何かしたい時は、docker exec -it コンテナ名 /bin/bashで入って実行したり、docker exec -it コンテナ名 supervisorctl restart nginxみたいな事も出来て便利。

約2年前

サーバー移転完了に伴いサイトの閲覧も可能な状態になりました。移転作業中にご訪問いただいた方には大変ご迷惑をおかけいたしました。今後このようなことがないよう気をつけて参ります。

約2年前

現在当サイトが閲覧出来ない状態となっております。こちらはサーバーの移転作業に遅れが生じているためとなっております。ご利用いただいている方にはご迷惑をおかけいたします。

約2年前

WordPress4.1.1(日本語版)が利用出来るようになりました wp.me/p4RkJY-Dj

約3年前

RT @keito_jp: Twitterをサマーウォーズ的に表示させるやつを製作中。遊んでみてね。 open.moo.jp http://t.co/gIgp5Gh6qW

約3年前

任天堂、YouTubeの広告収入を動画制作者とシェアする「Creators Program」サービス開始 | Game*Spark - 国内・海外ゲーム情報サイト s.gamespark.jp/article/2015/0…

約3年前

↑上へ戻る