夏の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でプロトタイピングしたい...などなど。興味を持った方は、[email protected]まで、お問い合わせください。責任を持って、全力ワークすることをお約束します\(^o^)/
ご覧いただきありがとうございました!