Sassについて・・・CSS記述高速化(?)Zen-coding(Emmet)についても少々

Sass(Syntactically Awesome Stylesheets)は簡単に言うと、cssを効率的に記述できる拡張言語(CSS拡張メタ言語)です。
似たようなものにLESSというものがありますが、LESSとSassの違いとか、そーゆー細かいことは割愛します。Google先生に訊いてください。

Sassはほとんどcssなので、cssがわかっていれば特に難しいことはないのですが、独特の記法があるので慣れるまではちょっと記述しにくいかもです。
ただ、ネストで記述できたり、widthとかの数値も自分で電卓叩かなくても計算式入れておけたり、いろいろ便利です。
慣れてしまえば、cssの記述を高速化できるかも・・・です。

基礎知識と利点について

使い方等、諸々は以下のサイトを一通り見てみるとわかると思います。


SassをWin + Dreamweaverで使えるようにする

早速ですが、まずは使える環境を整えないといけません。
Scoutという便利なアプリケーションがあるので、それを使うと良いでしょう。
下記のページに導入方法、使い方が説明されているので参考にしてください。

フリーの高機能エディタBracketsというものがあります。私も使い始めたばかりで使いこなし切れてませんが、かなり便利なので、興味がある方は使ってみてください。

ArgumentError: Error #3214 が出たら

上の導入方法を試している最中、ScoutでInput Folder/Output Folderを指定して、プロジェクト名(Scout画面左側のフォルダマーク付いているテキスト)の▶をクリックしたとき
ArgumentError: Error #3214
というエラーが出たら、次のことを確認してください。

参考ページ

なお、javaはかねてからセキュリティに関わる問題を指摘されているので、最新版を使うようにしてください。

compassも便利

Dreamweaverとかエディタにごにょごにょしなくても便利なツールというかフレームワークもあります。

いろいろ設定とか面倒だし、使いこなせるかわからんって人にはオンラインエディタでお試しするという手も・・・

Sassの記法

最初に独特の記法といいましたが、cssとかけ離れた記述の仕方をしたりするわけではないので、安心してください。
下記のページに記法について説明があります。mac環境についての説明もあったりしますがそれは無視してください。
まずは基本的な記述の仕方から・・・

もう少し詳しく・・・

Sassはバージョンアップしたりして、新たな記述の仕方とか出てきたりするので、ときどきgoogle先生に訊いてみてください。
Sass関連の書籍もたくさん出版されています。

便利なツール

Sassについては、わくわくしながら使ってる人が多いっぽくて、ネットで検索すると使い方から活用方法まで紹介してくれている人や、関連する便利なツールとか作って公開している人も結構います。
google先生が詳しいので、訊いてみてください。

例えばOneClickCSSとかは、htmlコードを先にささっと書いてそれからcssを組むという仕事の仕方をしている人には便利かも。

htmlコードをコピペして、ボタンを押すとsass(だけではないけど)で記述しやすいように、classとかを吐き出してくれます。

Sassで書いたコードを即時CSSに変換するツールとかもあります。


Zenコーディング(Emmet)

cssが効率よく組めるようになったら、htmlも効率化したいですよね?

例えば、zen-codingを組み込んだエディターで
div
と入力して、特定のショートカットキー(環境によって異なる)を押すと
<div></div>
に変換してくれます。
div.test
なら
<div class="test"></div>
になるという感じです(.を#に変えるとidになります)。
ほかにも入れ子とか便利な機能があります。

zen-codingは既存のエディターに組み込んで使うので、エディターによって導入の仕方が若干異なります。
Dreamweaverにも組み込めます。

Dreamweaverでの導入の仕方をご紹介しましたが、そのたのエディターについてはgoogle先生に頼んでください。

ちなみにDreamweaverの拡張機能で「メニューを更新できません。拡張機能パッケージは作成されません。」といったメッセージが表示されたら、以下のサイトを参考にしてみてください。

デフォルトのショートカットキーが使いにくい場合は、Dreamweaverの
編集→キーボードショートカット→現在のセット:command→コマンド:メニューコマンド→「コマンド」を展開→ZenCodingを展開→Expand Abbreviation等の書とカットキーを変更
で変更できます。

zen-codingについての詳しい使い方も、google先生におませします。
チートシートとかネットにいっぱい落ちているので、大丈夫!

Emmet

zen-codingはEmmetという名前にリネームされたっぽいです。
Dreamweaver CC 2014へのインストール方法・使い方は以下を参照してみてください(使い方はこれまでと変わりありません)。
Adobe CCをインストールする際に、拡張マネージャー(Adobe Extension Manager)もインストールしておくと楽です。

上述した、Bracketsというエディタの素晴らしい点の一つが、Emmetに限らず機能を拡張できることです(FFのアドオンやChromeの拡張機能と同様の感覚で組み込めます)。
コーディングをするうえで、かゆいところに手が届くような機能を好みで追加してカスタマイズできます。



戻る

Top