Css拡張言語のコトハジメ
- 1. CSS拡張言語のコトハジメ Sass（SCSS）、LESS
- 2. プロフィール • 名前：Yuu（Tsukaguchi Yuji） • 会社：動画配信会社 • 出来ること – ディレクション・デザイン・コーディング – WordPress・Movable Type • Twitter：regret_raym • Facebook：regretraym • サイト： – http://creator-life.net/ – http://code-life.net/
- 3. 今回の内容 • 最近よく聞くCSS拡張メタ言語とは？ • 作り方は？ • 種類は？ • 導入するメリット・デメリット • 何ができるようになるのか？ • LESSとSASSの違い • 使う環境を整える • まとめ
- 4. 最近よく聞くCSS拡張メタ言語とは？ • CSSの利点を活かして、もっとシンプルにかつ構文的に拡 張するメタ言語 – 構文的に？ • CSSの書き方はそのままで – メタ言語？ • メタ言語とは言語を作るための言語
- 5. 作り方は？ 1. CSSをメタ言語に沿った記法で記述して、指定拡張子で保 存する 2. それをCSSにコンパイル（変換）処理をする 3. CSSが生成される
- 6. 種類は？ • Sass（scss/sass） – http://sass-lang.com/ • LESS – http://lesscss.org/ • Stylus – http://learnboost.github.com/stylus/ • Tass – http://cho45.github.com/tasscss/ • PCSS – http://pcss.wiq.com.br/ • その他いろいろ。
- 7. SassとLESS
- 8. Sassとは？ • Sass（scss/sass） http://sass-lang.com/ – Sass（Syntactically Awesome Style Sheet：かっこいい構文のスタイ ルシート） – Rubyで書かれている • Rubyを開発環境へインストールしてコンパイル • SassはHamlから派生した – SassとSCSS - Sassの書き方は二つある • 拡張子は「.sass」と「.scss」
- 9. SassとSCSSの書き方の違い Sass記法 SCSS記法 ul ul{ display:inline; display:inline li{ li display:inline; a{ display:inline color:inline; a &:hover, &:visited{ color: #000; color: #ccc } &:hover, &:visited } } color: #000 }
- 10. SCSSの出力サンプル SCSS CSS ul{ ul { display:inline; display: inline; li{ } display:inline; ul li { a{ display: inline; color:inline; } &:hover, &:visited{ ul li a { color: #000; color: inline; } } ul li a:hover, } ul li a:visited { } color: #000; } }
- 11. LESSとは？ • LESS http://lesscss.org/ – シンプルかつ効率的に – JavaScriptで書かれている • クライアントサイドでコンパイル可能 • Nodo.jsを利用すれば動的にCSSがかける – LESSは既存のCSS構文に沿った記法 • 拡張子は「.less」
- 12. LESSの書き方 LESS CSS @color: #4D926F; #header { color: #4D926F; #header { } color: @color; h2 { } color: #4D926F; h2 { } color: @color; }
- 13. 導入するメリット・デメリット • メリット – CSSのコーディングを効率化できる – 統一化された記述によって可読性があがる – CSSファイルの分割によるデメリットが解消される
- 14. 導入するメリット・デメリット • デメリット – メタ言語によっては環境構築が必要 – チーム開発の場合、全員が記述方法を覚える必要がある – 今後どれが主要になるかわからない
- 15. クライアントに対しては？ • 基本はCSSで納品 • 拡張メタ言語ファイルも納品の場合、CSSの構成書+メタ言 語の資料作りも場合によっては必要？ • 分かりやすいファイル構成も考える必要がある
- 16. ファイル構成例 less/ |- styles.less |- variable.less |- mixin.less |- layout.less |- theme.less css/ |-styles.css
- 17. 何ができるようになるのか？ • 変数（Variables） • ネスト（Nested Rules） • 演算（Operations） • 関数（Functions） • ミックスイン（Mixins） ※その他、インポートなど。
- 18. 変数（Variables） Sass（SCSS） CSS $color: #4D926F; #header { color: #4D926F; #header { } color: $ color; h2 { } color: #4D926F; h2 { } color: $ color; }
- 19. 変数（Variables） LESS CSS @color: #4D926F; #header { color: #4D926F; #header { } color: @color; h2 { } color: #4D926F; h2 { } color: @color; }
- 20. 変数（Variables） Sass（SCSS） LESS $color: #4D926F; @color: #4D926F; #header { #header { color: $ color; color: @color; } } h2 { h2 { color: $ color; color: @color; } }
- 21. ネスト（Nested Rules） Sass（SCSS） CSS #header { #header h1 { h1 { font-size: 26px; font-size: 26px; font-weight: bold; } font-weight: bold; #header p { } font-size: 12px; p { font-size: 12px; } a { text-decoration: none; #header p a { &:hover { border-width: 1px } text-decoration: none; } } #header p a:hover { } border-width: 1px; } }
- 22. ネスト（Nested Rules） LESS CSS #header { #header h1 { h1 { font-size: 26px; font-size: 26px; font-weight: bold; } font-weight: bold; #header p { } font-size: 12px; p { font-size: 12px; } a { text-decoration: none; #header p a { &:hover { border-width: 1px } text-decoration: none; } } #header p a:hover { } border-width: 1px; } }
- 23. ネスト（Nested Rules） Sass（SCSS） LESS #header { #header { h1 { h1 { font-size: 26px; font-size: 26px; font-weight: bold; font-weight: bold; } } p { font-size: 12px; p { font-size: 12px; a { text-decoration: none; a { text-decoration: none; &:hover { border-width: 1px } &:hover { border-width: 1px } } } } } } }
- 24. 演算（Operations） Sass（SCSS） CSS $the-border: 1px; #header { border-left: 1px; #header { border-right: 2px; border-left: $the-border; border-right: $the-border * 2; } }
- 25. 演算（Operations） LESS CSS @the-border: 1px; #header { border-left: 1px; #header { border-right: 2px; border-left: @the-border; border-right: @the-border * 2; } }
- 26. 演算（Operations） Sass（SCSS） LESS $the-border: 1px; @the-border: 1px; #header { #header { border-left: $the-border; border-left: @the-border; border-right: $the-border * 2; border-right: @the-border * 2; } }
- 27. 関数（Functions） Sass（SCSS） CSS $color: #3bbfce; .sample{ border-color: #3bbfce; .sample { color: #2b9eab; border-color: $color; } color:darken($color, 9%); }
- 28. 関数（Functions） LESS CSS @color: #3bbfce; .sample{ border-color: #3bbfce; .sample { color: #2b9eab; border-color: @color; color:darken(@color, 9%); } }
- 29. ミックスイン（Mixins） Sass（SCSS） CSS @mixin button ( $radius : 5px, $bd- article p .button01 { color : #ff3, $bg-color : #f9f ){ border : 1px solid $bd-color; border : 1px solid #ddd; border-radius : $radius; border-radius : 10px; background : $bg-color; background : #123; width : 100px; float : left; width : 100px; } float : left; article p .button01 { } @include button (10px, #ddd, #123); }
- 30. ミックスイン（Mixins） LESS CSS .button ( @radius : 5px, @bd- article p .button01 { color : #ff3, @bg-color : #f9f ){ border : 1px solid @bd-color; border : 1px solid #ddd; border-radius : @radius; border-radius : 10px; background : @bg-color; background : #123; width : 100px; float : left; width : 100px; } float : left; article p .button01 { } .button (10px, #ddd, #123); }
- 31. ミックスイン（Mixins） Sass（SCSS） LESS @mixin button ( $radius : 5px, $bd- .button ( @radius : 5px, @bd- color : #ff3, $bg-color : #f9f ){ color : #ff3, @bg-color : #f9f ){ border : 1px solid $bd-color; border : 1px solid @bd-color; border-radius : $radius; border-radius : @radius; background : $bg-color; background : @bg-color; width : 100px; width : 100px; float : left; float : left; } } article p .button01 { article p .button01 { @include button (10px, #ddd, .button (10px, #ddd, #123); #123); } }
- 32. LESSとSassの違い • 記述方法とコンパイル方法の違い – たとえば変数 • LESSは@で宣言 • Sassは$で宣言 • 出来ることの違い – LESSはシンプルでコンパクト機能 – Sassは豊富な機能
- 33. 使う環境を整える
- 34. LESSの構築環境 • クライアントベースでコンパイル – headタグ内に下記をセットする <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
- 35. LESSの構築環境 • 手動でコンパイルする – オンラインWebツールを利用する – PCにツールをインストールして利用する
- 36. LESSの構築環境 • オンラインWebツールを利用する – LESSファイルをCSSファイルに変換 http://lesstester.com/ – CSSファイルをLESSファイルに変換 http://css2less.cc/
- 37. LESSの構築環境 • PCにツールをインストールして利用する – SimpLESS（win/mac） http://wearekiss.com/simpless – Lessnium（win） http://blog.mach3.jp/2011/05/lessnium.html – LESS.app（mac） http://incident57.com/less/ ※変換ツールによって、書きだされるCSSに違いがある
- 38. 注意点 • LESSのJS読み込みは、ローカル環境では実行できない – Htmlファイルを開いたときのfiletypeのurlやlocalhostのポート番号 付URLなど
- 39. Sassの構築環境 • ローカルでコンパイルする – コマンドプロンプトを使う – ツールを使う
- 40. コマンドプロンプトを使う • Rubyをインストールする – http://rubyinstaller.org/ – 「ruby –v」でインストールされているか確認 • gemのアップデート – gem update --system • gemでSassをインストール – gem install sass
- 41. コマンドプロンプトを使う • 作成したscssファイルをcssにコンパイル – 通常変換 • sass yurufuwa.scss:yurufuwa.css – 単一ファイルを監視 • sass --watch yurufuwa.scss :yurufuwa.css
- 42. ツールを使う • SCOUT – http://mhs.github.com/scout-app/
- 43. まとめ • LESS、Sassどちらでも今まで以上の効率の良いコーディン グを行うことができる • ファイルは出来る限り分割して、誰が見てもわかりやすい ように構成しよう • まずは自分のサイトのCSSを変えてやってみると分かりや すい
- 44. 参考URL • 公式サイト – LESS « The Dynamic Stylesheet language – Sass - Syntactically Awesome Stylesheets • むゆうさんのブログ – はじめの一歩！CSSをもっと便利に書けるLESSとは • 自分のブログ – LESSの使い始めメモ – Sassの使い始めメモ
- 45. ご清聴有難うございました。