Css拡張言語のコトハジメ

4,027 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,027
On SlideShare
0
From Embeds
0
Number of Embeds
1,759
Actions
Shares
0
Downloads
25
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Css拡張言語のコトハジメ

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

×