チャレンジする内容は下記の通り。
- ST2を使ってコーディング
- SCSSを使ってコーディング
- CSSの圧縮による高速化
- COMPASSの活用
- CSS スプライト
- 各種ベンダープレフィックス
- デフォルト変数の設定
上記にチャレンジしてみて、いわゆるフロントエンド周りの高速化にチャレンジ、というわけです。
自分の備忘録的に書いておきます。
基本的にProjectをはじめるにはここを読みましょう。
http://dev.classmethod.jp/tool/scss-compass-fast-development-for-sublime-text-2-compile/
ST2でProjectをはじめるには、ディレクトリを作っておく必要があります。
ディレクトリは必ずフルパスに2バイト文字がないように作りましょう。そうでないとSCSSのコンパイル時にコケます。
私の場合はDWのクセが抜けず、ローカルで作ってアップロードする、ということをやっております。
ローカルにProjectのルートになるディレクトリを作ります。
リモート側はさくらのVPSを借りているので、sshで入ってmkdir、chownを行い、/etc/httpd/conf.d/vhost.confを編集してmkdirをしたディレクトリに下記の設定を行います。
<VirtualHost *:80>
DocumentRoot /"Projectルートディレクトリまでのパス"/"Projectルートディレクトリ名"
ServerName "当てるドメイン(ドメインはDNS設定済みのもの)"
ErrorLog logs/"当てるドメイン"-error_log
CustomLog logs/"当てるドメイン"-access_log combined env=!no_log
<Directory "/"Projectルートディレクトリまでのパス"/"Projectルートディレクトリ名"">
AllowOverride All
</Directory>
</VirtualHost>
/etc/init.d/httpd restartでApache再起動。
これで作ったディレクトリに設定したドメインが適用されました。
今度はローカルに作ったディレクトリにCSSを置くディレクトリ、画像を置くディレクトリ、SCSSを置くディレクトリ、JSを置くディレクトリを作成します。
私の場合はs-assetsってディレクトリを作って、そこにcss,scsss,js,imgというディレクトリを置きました。
その他、PHPでパーツ分けをして俺々CMSを作るので、s-includeってディレクトリを作って、そこにfunction、head、partsといったディレクトリを作り、includeするパーツをごちゃごちゃ入れていきます。
s-ってつけるのは、ルートディレクトリでどれがシステムに使っているかわかるようにするためです。JSで使うDOMのクラス名にjs-ってつけるみたいなもんですね。
このProjectではクラス名の区切りはすべて-で行くようにしてみようと思います(いつもすんごいバラバラにしてしまうので)。
これで環境が整いましたので、ST2を起動しましょう。
すでに「コーダー必見～Sublime Text 2でコンパイル編」よろしく、「5, Sublime Text 2とパッケージのインストール」まで終わっているとします。
Project > Add Folder to Project...で、上記でローカルに作ったProjectルートディレクトリを指定します。
ST2でコンパイルに必要なconfig.rbを作ります。
config.rbでの設定値が未だに覚えられないので、コメント書いちゃってます。
上記のディレクトリ構造から、下記のようなconfig.rbとしました。
http_path = "/"
css_dir = "s-assets/css"
sass_dir = "s-assets/scss"
javascripts_dir = "s-assets/js"
images_dir = 's-assets/img'
output_style = :expanded #:expanded({} で改行する形。よくみる CSS の記述形式はこれです。) OR :nested(Sass ファイルのネストがそのまま引き継がれる形。) OR :compressed(圧縮して出力（全ての改行・コメントをトルツメ）。可読性は投げ捨て。)
line_comments = false
これで準備は整いました。Projectを保存しましょう。これをしないといろいろ自動的に動きません。
Project > SaveProjectAs...でProjectを保存です。
Projectファイルが2バイトを含むフルパスは以下にあると、これもコンパイルでこける原因になります。なのでProjectルートディレクトリに置いてしまいましょう。ただし、間違えてProjectファイルをアップロードするようなことがないようにしましょう。
Projectファイルが保存できたら、SCSSのコンパイルです。SCSSを用意してみましょう。
@import "compass";
a
{
width:500px;
overflow:auto;
@include box-shadow(1px 1px 0 #ccc);
}
こんなファイルを作ったら、base.scss（拡張子はscss!!）でscssディレクトリに保存しましょう。
そしてCtrl+B！
これでcssディレクトリにbase.cssができていて、エラーがなければ環境はOKです。
あとはST2のSFTPプラグインを入れていれば、その設定を行いましょう。このファイルもルートに保存しますが、くれぐれもアップロードしないように注意しましょう。
いい加減ST2とSFTPパッケージ、買おうかな…。
0 件のコメント:
コメントを投稿