らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。
チームで作業する場合、ソースマップ普通に便利かも。
てか必須かも。
いままでは
1）cssからscssを辿るのはそんなに大変でもない
2）もしSassファイル内での行番号を知りたい時は、ラインコメントを出力すればいい
みたいな感覚でいたんですけど
cssを見ればscssのどこか判ると言っても、20〜30を超える数の.scssを@importしたサイトになると流石に骨（心）が折れるし
ラインコメントなんてのは論外で、例えば改行の仕方が違う人がscssを編集するだけで
gitが反応しまくるので非常に面倒臭いってのが実際。
開発者ツールで直接scssのどこかに書いてあるのかが判るので、使わないより使った方が断然早い。
もし直接cssが見たいようて時は
ブラウザの設定を変更すれば切り替えられるので
安心安心
複数のgoogledriveを一緒に開きたくてodrive（https://www.odrive.com/）とか使ってたんですけど
たまに共有に落ちてこないファイルがあったりして使うの辞めました。
とはいえgoogle driveアプリは共有アイテムを拾ってくれなくて困ったなーって思ってたら
マイドライブに移せばローカルでも開けるんですね。
マイドライブに移したいファイルを選択して、右上のマイドライブに移すアイコンをクリックです
今まで使ってこなかったんですが、CodeKitにはKit languageという簡易テンプレート機能があるみたいなんです。
https://incident57.com/codekit/help.html#kit
参考
CodeKitの新機能「Kit Language」（2012年12月19日）
CodeKitの隠れた秀才「Kit Language」で効率化を図る（2013年03月27日）
CodeKitのKit Language（2014年12月11日）
（随分昔からある機能なんだな…
if文は使えないけど変数は使えて
拡張子.kitの中に.kitファイル（.htmlも可）をimport(include)して保存すれば
合体した.htmlファイルを書き出してくれます。
使いこなせたら便利そうなんだけど、
困ったことに拡張子.kitのファイル中ではemmetがうまいこと展開されない( ´・_・｀)
例えば
1 | ul+ |
をexpand abbreviationすると
1 2 3 | <ul> <li></li> </ul> |
とならずに
1 | <ul+></ul+> |
となってしまい、このままでは使い物にならない。
わりと簡単に対応させられました。
1 | /Library/Application Support/Coda2/Plug-ins/Emmet.codaplugin |
を右クリックして[パッケージの内容を表示]
その中の
1 | /Contents/Resources/snippets.json |
を開く
下の方に
1 2 3 | "kit":{ "extends":"html" }, |
を追加
これでおk
ul+を展開して動作確認してみよう。
こちらはcoda2の環境設定から[エディタ＞カスタム言語モード]
テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。
なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。
さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。
Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。
例えば次の記述は
1 2 3 | div{ display:flex; } |
こんな風に変換される。
1 2 3 4 5 6 | div{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; } |
今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。
ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら？
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。
[追記 / 2015-10-05]
OSX 10.11 El Capitanにアップデートしたら
1 2 | sudo gem install sass sudo gem install compass |
なんていつもみたいに風にsassやcompassをインストールしようとすると
1 2 3 4 | Ignoring psych-2.0.8because its extensions are notbuilt. Try:gem pristine psych--version2.0.8 Ignoring json-1.8.1because its extensions are notbuilt. Try:gem pristine json--version1.8.1 ERROR: Whileexecuting gem...(Errno::EPERM) Operation notpermitted-/usr/bin/sass |
みたいなこと言われてインストール出来なくなってた。
どうやらRootlessってやつが働いてるからだそうな
OS X 10.11 El CapitanではOS Xの新たなセキュリティ整合性保護機能（SIP: System Integrity Protection）通称”Rootless”が導入されており、例え管理者権限(root)であっても”/System”, “/bin”, “/usr”, “/sbin”ディレクトリにファイルの作成が出来なくなっていますが、Appleは開発者向けにこのRootlessを操作するコマンド”csrutil”を提供しています
OS X 10.11 El Capitanのシステム保護機能「Rootless」を無効にするcsrutilコマンドの使い方。
とりあえず
1 2 | sudo gem install-n/usr/local/bin sass sudo gem install-n/usr/local/bin compass |
と書いてインストール出来た。
[追記 / ここまで]
聞きかじったものをがっちゃんこなので間違えてたりおかしい事してるかも。
sass（scss）だけならプラグイン入れちゃえばすぐ使えるんだけど、まぁ手段が増えるのはいいことです。
sassを使いたいディレクトリに移動しておく（ちゃんとサイト設定してれば不要
1 | cd"scssとcssフォルダを作成した場所をドラッグ＆ドロップ" |
Rubygemsをアップデート
1 | sudo gem update--system |
sassをアップデート
1 | sudo gem update sass |
compassをアップデート
1 | sudo gem update compass |
Rubygemsのバージョン確認
1 | gem-v |
sassのバージョン確認
1 | sass-v |
compassのバージョン確認
1 | compass-v |
1 | sass--watch input元のパス:output先のパス |
プロジェクトを作成する。
config.rb（compassの設定ファイル）が無ければ最初に作る
1 | compass create--bare |
とりあえずconfig.rbとsassフォルダだけが作られます。
これが基本
1 | compass create |
あとはウォッチさせておけばいい
1 | compassw |
もしくは
1 | compass watch |
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
Compassを使用する準備 | Web制作者のためのSassの教科書 – 公式サポートサイト
Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 – 公式サポートサイト
CSS – 全容をざっくり理解するために、Sass+Compassの覚え書き – Qiita
CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG
cjk-ideographicてば
css2で実装されて、
2.1で一時削除されたけど
3で復活したもんだと思っていたらIEが対応してなかった。
firefox（やその他のブラウザー）での表示
IE11での表示
