便利ツール「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。Sassとは日本語では「サス」と読まれるようです。拡張子は「.scss」。ファイルを、変換(コンパイル)してCSSファイルを作成します。「style.scss」のSassファイルを変換すると「style.css」のできあがりです。!「最近CSSの勉強を始めた!CSSすげえ!楽しい!」というCSS初心者さんにはオススメしません。CSSの基本をコツコツ手打ちで覚えていきましょう。数ヶ月たってCSSにも慣れてきた頃に、Sassの存在を思い出してくれれば幸いです。何がどうなるの?説明よりも実際にCSSコードを見た方が、コーダーな皆さんにはわかりやすいですよね。Sassの主な変換例をみてみましょう。ネスト(入れ子)親セレクタを何度も記述しなくても、ネスト(入れ子)にすることで子セレクタ管理もラクラク!これだけでコーディングの時間短縮できそうです。メンテナンスも楽になりますね。変数とは、データを入れておく箱のようなものです。一度名前をつけて定義しておくと、そのスタイルシートでいつでも使うことができます。何度もでてくる数値やカラーコードを変数にしておくと便利ですね。変数名の最初には「$」をつけます。「&」を使えば入れ子になっている親セレクタを引っ張ってくることができます。「:hover」などの指定に使えますね。足し算(+)・引き算(-)・割り算(/)・掛け算(*)などの演算式を書いておくと、CSSに変換した時に自動的に解の数値が吐き出されます。}まだまだいろんな技が使えるのですが、ひとまず今日はここまで!続いてMacのCodaでの環境設定の方法を書いてみます。XにはもともとRubyがインストールされているので、Macユーザーの皆さんは何も恐れることはありません。私の愛用しているエディターアプリ「Coda」にはターミナルが内蔵されていますし、CSSに変換するためのCodaプラグインも配布されているので、Codaがあれば他のアプリは不要です。Windowsユーザーさんは下記リンクあたりが参考になりそうです。コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)Sassをインストールそれではさっそくインストールしてみましょう!Codaを立ちあげ、ターミナルで以下を入力。sassパスワードを聞かれると思うので、OSのパスワードを入力してReturnキーを押すとインストールが完了します。パスワードはタイプされたか見た目でわかりませんが、きちんと認識されています。変換(コンパイル)するためのCodaプラグインを入手しましょう。Plug-inからダウンロードしたファイルをダブルクリックでインストール完了。Codaに反映されていない場合は、Codaを再度立ちあげてみましょう。新規Sassファイルを作成し、上記のコード例を入力してみましょう。.scssファイルを開いている状態で「コントロール+シフト+S」で変換完了です。ファイルが生成されていると思います。今のところ環境設定の「自動的にCSSファイルを作成」にチェックを入れていてもうまく動作しない模様。手動で地道に変換しましょう...。Modeを「Sass」にきちんと設定すると普通に保存できました。Sassの場合、保存時に拡張子を変えるだけでは認識されないようです。して認識されるようになった気がします。気のせいだったらごめんなさい。2012Zenコーディングを使って更にスピードアップ!以前「コーディングのスピードを上げる為の6つの方法」でも紹介したZenコーディング。coda」が必要です。こちらをインストールしてZenコーディング自体の設定を完了しておきましょう。Coda」を導入してコーディング効率を上げる」という記事も参考にしてみてください。それではSassファイルでもZenコーディングができるようにします。「my_zen_settings.py」ファイルをここからダウンロードします。Coda.codaplugin」ファイルを右クリックして「パッケージ内容を表示」を選択。ダウンロードした「my_zen_settings.py」ファイルを置いて完了です。Codaを再起動させると、SassファイルでもZenコーディングが使えるようになっています。Sassのお役立ちリンクいろいろSass公式サイト例文などあります。今回はCodaを使ったSassの設定方法を紹介しましたが、もちろんWindowsでもCoda以外のアプリでもSassは使用可能です。検索したら他の設定方法も見つかると思うので、ぜひ探してみてください。amまなさんこんにちは!記事紹介いただきありがとうございます^^ZenコーディングとSassでコーディングはホント早くなりますよね。Macを導入したあかつきにはこの記事を参考にさせて頂きますー。立て置きでこの記事を見ると、テキストが縦に並ぶ、と言うか縦書きみたいになります。見ていたのできがつきませんでした。pmすみません、いらん心配をおかけしたようですね。記事自体すごくわかりやすいです。参考にさせていただきます。amManaさんいつも楽しく拝見させていただいています。Styleの変更の方法が解らなくて困っています。見当たりません...。方法を御存知でしたらお教えください。[...]ニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。