Inc.オンラインでのお打ち合わせが可能です。CONTACTmail_outlineBlogHOMEBlogPreprosの使い方&Sass入門編2013.12.10こんにちわ!ガイナーレ鳥取がJ3に落ちて意気消沈の山尾です!さて今日のテーマはSassです!もうあちこちで使われていてご存知の方も多いと思います。簡単に説明しますと、効率よくCSSを書く為のCSSの拡張言語!調べてみて便利なのはわかるけどRubyのインストールとか黒い画面とかめんどくさそう・・っていう人におすすめ!Preprosを使って簡単に環境を構築しよう!!Preprossとは高機能無料コンパイラです。Windowsをクリックしてダウンロード&インストールインストール方法は手順どおりなので割愛します。Prepros実際に使うなんでもいいのでcssを書きます。以下のコードをコピペして使ってください。}それを任意のsassディレクトリに.scssファイルで保存Preprosを立ち上げたらまずはプロジェクトを作成sassディレクトリの入ったディレクトリをドラッグ&ドロップ!これだけです。sassディレクトリではなくその親ディレクトリを入れてください!例common/sass/style.scssならcommonを放り込んで下さい。赤が出てきたら失敗です。成功するとstylesheetsというディレクトリが作成されcssファイルが作成されます。今のままだと自動で生成されディレクトリ名を変更できません。このディレクトリ名を変更する方法。config.rbファイルを親ディレクトリに置くCompassの設定ファイルです。sassこれを親ディレクトリに設置すればコンパイル後のファイルがcssディレクトリに保存されます。"css"の箇所を変更してください。以上でPrerosのSass環境構築は完了です!せっかくなので少しsassを書いてみましょう。}こんな感じになります。通常のCSSの表記ですね。}表示はこうなります。}変数は設定ファイルを作りまとめて書いておくと便利ですね。}コンパイル後、こうなります。white;}他にもMixinやextendなど便利な機能がいっぱいなSassです。News7月12日(金)は社外での全体総会のため、臨時休業となります。