css

Coda2でプラグインを使わずにsassやcompassを使うメモ

[追記 / 2015-10-05]
OSX 10.11 El Capitanにアップデートしたら

sudo gem install sass
sudo gem install compass

なんていつもみたいに風にsassやcompassをインストールしようとすると

Ignoring psych-2.0.8 because its extensions are not built.  Try: gem pristine psych --version 2.0.8
Ignoring json-1.8.1 because its extensions are not built.  Try: gem pristine json --version 1.8.1
ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted - /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コマンドの使い方。

とりあえず

sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass

と書いてインストール出来た。
[追記 / ここまで]


聞きかじったものをがっちゃんこなので間違えてたりおかしい事してるかも。

sass(scss)だけならプラグイン入れちゃえばすぐ使えるんだけど、まぁ手段が増えるのはいいことです。

Coda2からターミナルをlocalhostで開く

sassを使いたいディレクトリに移動しておく(ちゃんとサイト設定してれば不要

cd "scssとcssフォルダを作成した場所をドラッグ&ドロップ"

アップデート

Rubygemsをアップデート

sudo gem update --system

sassをアップデート

sudo gem update sass

compassをアップデート

sudo gem update compass

バージョン確認

Rubygemsのバージョン確認

gem -v

sassのバージョン確認

sass -v

compassのバージョン確認

compass -v

sassだけで使う

sass --watch input元のパス:output先のパス

compassを使う準備

プロジェクトを作成する。
config.rb(compassの設定ファイル)が無ければ最初に作る

compass create --bare

とりあえずconfig.rbとsassフォルダだけが作られます。

これが基本

compass create

あとはウォッチさせておけばいい

compass w

もしくは

compass watch

参考

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

Compassを使用する準備 | Web制作者のためのSassの教科書 – 公式サポートサイト

Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 – 公式サポートサイト

CSS – 全容をざっくり理解するために、Sass+Compassの覚え書き – Qiita

CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG

Dreamweaver CS4 / CS5 cssコードヒントのwidowsを消す

やりたい事

cssのコードヒントで
widまで入力したら
widowsじゃなくwidthを表示させたい

対処法

CodeHints.xmlを変更する事で可能(自己責任で)

CodeHints.xmlの場所

cs4以前とcs5以降で対象のCodeHints.xmlの位置がどうも違う?

Windows7での例

cs4

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints\CodeHints.xml

cs5

C:\Users\[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeHints\CodeHints.xml

実際の作業

CodeHints.xmlを開いて
Ctrl+F(検索)でwidowsを探す

多分3件ヒットするので

<menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" />

の方をコメントアウト
で、コードヒントにwidowsが表示されなくなると思う。

こっちもコメントアウトしといたほうがいいのかな。


<menu pattern="widows:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
 <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>