夏のSass徹底入門ガイド Vol.1

夏のSass徹底入門ガイド Vol.1Written by Yoshiyuki Hirano @ HentecoLabs Inc. created_at 2014-07-03 00:28:33 +0900

自己紹介

Yoshiyuki Hirano<h1>株式会社へんてこらぼ（京都府京都市）代表取締役</h1>

<ul> <li>1979年5月生まれ。双子座 O型。神奈川県出身。</li>

<li>フロントエンドが得意なWEBディレクター。</li>

<li>Rails3&4ならば、バックエンドも開発可能。</li>

<li>いわゆる、経験積みたい準フルスタックエンジニア。</li>

<li>技術好き。Rails4/Angular/Sass/CoffeeScriptが好き。</li>

<li>テンプレート好き。Slim/Haml/Erb/jBuilder/Liquid/Smarty。</li>

<li>ジェネレータ好き。Middleman/Jekyll/MovableType。</li>

<li>8月からいろんなプロジェクトに混ざりたい。案件ください。</li>

<li>ANNやJUNKなど、深夜ラジオ大好き。</li>

</ul>

<!-- pic by 55Laney69 -->

このスライドの対象読者

Sassに触れたことがないWebデザイナー/HTMLコーダー/何でもやりがちなWebディレクター

では始めます。

Sassってなぁに?pic by Thomas Leuthard

Sassは【CSSを書くためのメタ言語】です。

Sassを使うと何が便利なの？pic by VFS Digital Design

Readable && Maintainable && Powerful

4 CSSが スッキリ読みやすくなる4 CSSが 管理しやすく、破綻しにくくなる4 フレームワークが使えるようになる

THE みんなが幸せになれる技術＼(^o^)／

…でも導入が面倒なんでしょ？pic by didy b

Rubyがインストールされていればぺろぺろっと導入できます

[1] ターミナルを開いて、Ruby（1.9.3以上）がインストールされているか確認

$ ruby -v ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin13.0]

[2] Rubyがインストールされていたら、SASSをインストールするだけ。

$ gem i sass

たったこれだけでセットアップ完了＼(^o^)／

…で、どうやって使うの？pic by didy b

使い方は超カンタン

① 次のような「sample.scss」というファイルを用意します。

// sample.scss

.container { background: #fff;

p { font-size: 80%; } a { color: #000; text-decoration: none; }}

② ターミナルを起動して、次のコマンドを実行します。

$ sass sample.scss:sample.css# sassコマンドを実行して、sample.scssをsample.cssに変換するよ、という内容です。

たったこれだけで、sample.scssがcssファイルに変換されます⋆（ゝω・）v

③ 変換されたファイルを見ると、次のようなCSSファイルに変換されています。

/* sample.css */

.container { background: #fff; } .container p { font-size: 80%; } .container a { color: #000; text-decoration: none; }

CSSを理解していれば、何も難しくないはず（ ＾ω＾）

えーっ、今まで書いたCSSを、SCSSに書き直さないといけないの？

すんごい面倒なんですけど（怒）pic by Tambako the Jaguar

大丈夫

今まで使っていたCSSはsass-convertコマンドでSCSS形式にぺろぺろっと変換できます

① 次のような、「sample2.css」ファイルがあるとします。

/* sample2.css */

#container { margin: 0 auto; background: #fff;}

#container p { font-size: 80%;}

② ターミナルを起動し、次のコマンドを実行します。

$ sass-convert sample2.css sample2.scss --from css --to scss# sample2.cssをsample2.scssに変換するよ、という内容です。

たったこれだけでCSSファイルが、SCSSファイルに変換されます⋆（ゝω・）v

[3] 変換された「sample2.scss」は、次の通りです。

// sample2.scss

#container { margin: 0 auto; background: #fff; p { font-size: 80%; }}

もう、CSSを直接書く気にはなれませんよね？（・∀・）

CSSファイルの数だけコマンド打つのめんどくさー！

どうにかならないの！？pic by Jean-Rene Vauzelle

watchオプションでフォルダを監視すればまとめてSCSSに変換できます

① あらかじめ、SCSSでまとめたフォルダ、変換されたCSSが出力される空のフォルダを作成します。

② ターミナルを起動して、次のコマンドを実行します。

$ sass --watch scss_dir:css_dir# SCSSフォルダを監視して、ファイル内容に変更があったら、# css_dirに向けてファイルを変換するよ、という内容です。>>> Sass is watching for changes. Press Ctrl-C to stop. write css_dir/xxxx_1.css write css_dir/xxxx_2.css

これで、いちいちコマンドを実行する必要はありませんね（・∀・）

さっきからさぁ、SCSSって言ってるけど、これってSASSなんだよね？

一体どーゆーこと？pic by Daniele Zedda

Sassには、2つのシンタックス（記述形式）があります。

① SCSS形式

// sample.scss（SCSS形式）

#container { margin: 0 auto; background: #fff;

p { font-size: 80%; }}

4 拡張子は *.scss。4 中括弧{}とセミコロン（;）が必須。4 インデントはあってもなくてもオッケー。4 CSSと文法がほとんど同じなので覚えやすい。

② SASS形式

// sample.sass（SASS形式）

#container margin: 0 auto background: #fff

p font-size: 80%

4 拡張子は *.sass。4 中括弧{}とセミコロン（;）が不要。4 インデントが必須。ないとエラーになる。4 CSSと異なる文法のように見えるので抵抗感あるかも!?

CSSに変換したら、どちらでも同じなので、どちらのシンタックスでも無問題。でも...

短く、簡潔に、可読性の高いコードを書くなら中括弧｛｝もセミコロンも要らないSASS形式を採用してください。

Vol.1はこれでおしまいです。

Vol.2では、次のような内容を予定しています。

4 Sassでコード量を減らす3つの方法4 分かりやすいベタなファイル構成4 チーム内での記述ルールの決め方4 変数・演算を利用する4 Sassフレームワークを利用する（Compass/Bourbon）4 学習コストの目安

最後にお知らせです。pic by kennymatic

株式会社へんてこらぼ では、2014年8月より、ウェブ・モバイルアプリ開発の業務委託を積極的に行ってまいります。4 北海道から沖縄・アジアなど、国内外出張可。4 京都からのリモートでの業務委託も承っております。4 このスライドの著者が助っ人になります（・∀・）4 フロントエンド・バックエンド・テスト・UIデザイン・ディレクション・プランニング、何でもサポートします。

4 Ruby on Rails/Angular.js/Backbone.jsがベターですが、フロントエンドならば、どんな言語でも構いません。

フロントエンドの実装をしつつ、我が社のデザイナー・HTMLコーダーにレクチャーしてよ...なんて要望もOK。たとえば...4 SassやCoffeeScriptを導入したい。4 デザイナー・コーダーのワークフローにGitを導入したい。4 デザイナーやディレクターにもRailsのキホンを教えたい。4 MiddleManでプロトタイピングしたい...などなど。興味を持った方は、info@henteco-labs.comまで、お問い合わせください。責任を持って、全力ワークすることをお約束します＼(^o^)／

ご覧いただきありがとうございました！