グラフィック」TweetWindows10でSassが使える環境を整える手順をご紹介いたします。StyleSheet)とは、より効率的にCSSが書けるように拡張されたCSSのメタ言語です。Sassを使えば、変数を利用して(変数は通常のCSSでも利用可能ですが)値を管理したり、セレクタを入れ子にしてコードの記述量を減らしたりすることが可能です。一言でいうと、「すごいCSS」という感じです。(語彙力...)Sassは便利な反面、利用できるようにするための環境構築が少し面倒だったり、少なからず学習コストがかかります。「便利なのはわかるけど、どうやって導入すればいいんだろう...」と思い、なかなか手を出せずにいる方も多いのではないでしょうか。そんなわけで今回は、とりあえずSassを使えるようにするための環境構築について解説いたします。手順通り進めてもらえば、Sassが利用可能な環境の出来上がりです。RubyのインストールSassを利用するためには、Rubyがインストールされている必要があります。Macでは標準でインストールされていますが、Windowsでは自分でインストールしなければいけません。いっても非常に簡単です。RubyInstallerにアクセスして、[Download]ボタンをクリックします。最新版のRubyをダウンロードします。OSであれば”x86′′を選びます。DEVKIT)がありますが、これはどちらでも構いません。SassのためだけにRubyをインストールする場合は、DEVKITなしで大丈夫です。Kit)は後々必要になってくる可能性もあるため、DEVKITありの方をダウンロードしておいた方が無難です。インストーラをダウンロードしたら、Rubyをインストールします。PATH(Rubyの実行ファイルへ環境PATHを設定)」にチェックが入っていることを必ずご確認ください。ruby」を実行してRubyのバージョンを確認してみましょう。以下のようにバージョン情報が表示されます。ちなみに、Rubyがインストールされていない環境では、コマンドが実行できません。Rubyがインストールされていないと、コマンド実行時に以下のようなメッセージが表示されます。ファイルとして認識されていません。ファイルとして認識されていません。SassのインストールRubyのインストールが完了したら、次はSassをインストールします。sass」というコマンドを実行します。待つと、以下のような画面が出てインストール完了です。sass」というコマンドを実行します。インストールされていれば、バージョン情報が表示されます。Sassコンパイラ「Koala」のインストールSassの記法で書いたファイルは、そのままではブラウザが理解できません。そのため、Sassのファイルを通常にCSSファイルに変換(コンパイル)してあげる必要があります。そこで便利なのが、Koalaです。Koalaを使えば、SassをCSSに自動で変換することができます。Sass」という拡張機能があったりします。Koalaの公式サイトにアクセスして、インストーラをダウンロードしましょう。ダウンロードしたインストーラを実行して、Koalaをインストールします。[Next]をクリックしていくだけなので、インストールで特に迷うことはないかと思います。インストールが完了したら、早速Koalaを起動してみましょう。左上にある歯車マークをクリックすると、Koalaの設定変更ができます。Generalタブにて、Languageで「日本語」を選択すれば日本語化できます。実際にKoalaを使ってみましょう。適当なフォルダを作成し、その中に「test.scss」というファイルを追加します。作成したフォルダ毎、Koalaにドラッグ&ドロップします。.scssファイルを自動で認識して画面上に表示されるので、クリックしてファイルを選択します。すると右側に設定項目が表示されるので、好みの設定に変更します。CSSに変換した時の記述スタイルアウトプットスタイルは、それぞれ以下の通りです。nested:Sassのネスト(入れ子)を引き継ぐcompact:セレクタ・プロパティ・値を1行にまとめるcompressed:改行や空白を取り除いて軽量化expanded:通常のCSSアウトプットスタイルは「expanded」にしておけば間違いないかなと思います。実際にSassを記述してみましょうKoalaのインストールと設定ができたら、Sassが使える環境構築は完了です。Koalaにドラッグ&ドロップした.scssファイルに以下を記述してみてください。}}同じフォルダ内に.cssファイルが作成されていますので、CSSファイルを確認すると、以下のように変換されているのがわかります。#333;}これはごくごく簡単な例ですが、セレクタを入れ子にして記述することで、簡単に子要素のプロパティを指定できます。このように、効率よくCSSを書けるようになるのがSassのメリットです。あとがき長々と書きましたが、実際に作業してみると10~15分くらいで終わります。上述した内容はあくまで環境構築なので、Sassの記法については学習する必要があります。いっても、CSSを理解していれば習得は早いと思います。ちなみに、例として紹介したコードは”SCSS記法”と呼ばれる書き方で、セレクタの括弧やプロパティのセミコロンをなくした”SASS記法”という書き方もあります。どちらの記法を使うかは自分がやりやすい方を選べば良いですが、SASS記法はコードがちょっと見辛いので、SCSS記法の方が普及しています。コメントをキャンセルメールアドレスが公開されることはありません。