HappyLifeCSSに関するネタを中心に色々書いてます。(木)SassTweet前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ!と言うのをTwitterで@grfxdsgnさんから教わりました。バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください!こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。バッチファイルって?ウィキペディアとか見てもらうと色々書いてありますが、黒い画面で実行できるコマンドをテキストファイルに記述したもので、これを実行すると黒い画面がそこに書いたコマンドやらを読んで実行してくれます。その際、拡張子は通常「.bat」を利用します。「.cmd」でも良いみたいですが、ここでは「.bat」で進めます。中身はテキストファイルなんで、「.txt」「.css」「.html」とかの拡張子が違うだけですね。詳細が気になる方は適当にググッてもらえると良いかと。このバッチファイルを利用するとWクリックするだけでSassが利用できます!やばい、ステキ///手打ちやメモってコピペとか地味なことをする必要もないんです。Coolにクリックするだけです!バッチファイルを用意する前にバッチファイルはディレクトリ(フォルダ)構成に影響を受けてしまうので、次のようなディレクトリ構成として進めます。/sass/Scoutの時は、cssフォルダ内にsassフォルダを作っていましたが、いつものHTMLファイル一式とは別でsassフォルダを作ってる感じです。バッチファイルの準備いつも使ってるエディタから新規作成して、以下の内容をコピペします。【--cache-location】キャッシュファイルの保存先コピペしたら、ファイル名は何でもOKですがとりあえず「sass_start.bat」として保存します。テキストファイルをアップしたのでそちらをダウンロードして拡張子を「.txt」から「.bat」に変更してもらってもOKです。Sassを開始するバッチファイルのテキストファイルこのバッチファイルを、ルートに置きます。/sass//sass_start.batって感じですね。この、.batファイルはWクリックすると、そのまま黒い画面が起動してしまうので、編集する際にはエディタにドラッグアンドドロップするなどして開いて下さい。バッチファイルには、::でコメントが書いてあるので内容は把握できるかと思いますがカンタンに。置いた場所)に移動しています。黒い画面に慣れてないと、まず移動するとかがイミフな感じですけど、基本的に移動したディレクトリに対して命令を実行させるので移動します。移動した先で、次のsassから始まる部分の命令を実行しています。これが実行されることでsassが利用できるようになるんですが、その際に前述したディレクトリ構成に影響が出るとお伝えした部分が関係してきます。.scssファイルが有る場所と.cssファイルが吐き出される場所になるので、ディレクトリ構成がこれと違う場合、正常に動作しません。ディレクトリ構成を変更したい場合は、この部分を適所変更すればOKです。Scoutの時のようにcssフォルダ内にsassフォルダを置く構成の場合は、html/css/sass:html/cssって感じです。sassの方のパスを前回のようにドライブから書けば最初に現在のディレクトリに移動する必要も無いんですが、それだと毎回バッチファイルの中身を変更しないといけないのでこんな感じにしています。逆にバッチファイルを一ヶ所にまとめたい場合は、1行目の移動は削除してやった方が良いかと思います。次に、今まで一度も出て来ませんでしたがSassを利用すると.sass-cacheってフォルダ名でキャッシュファイルが生成されます。標準だと、黒い画面の現在のディレクトリに生成されてしまい、それだとちょっと邪魔なので、sassディレクトリ内に生成されるようにしています。ボクは個人的に.sass-cacheは一ヶ所にまとめたいので、自分用では以下のようにして同じ場所に生成するようにしています。後に生成される場所を指定する感じですね。バッチファイルの中身はこれでお分かり頂けたでしょうか。中身が分かった所で、このバッチファイルをWクリックとかで実行すると、黒い画面が自動的に立ち上がって、ディレクトリが変更されSassが起動します!↑こんな感じで起動すればばっちりですね。)ノこのバッチファイルを案件毎にコピって置いておけば、バッチファイルをクリックするだけでSassを起動してくれるってスンポーです。「Web制作者のためのSassの教科書」の改訂2版が発売しました。́)ゞそろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。Sassの教科書で一番読んで欲しいところ。Spaceが3月1日にオープンしますCSSSってコワーキングスペース運営するです。excluded.↑上に行くよ。