Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css拡張言語のコトハジメ

4,171 views

Published on

  • Be the first to comment

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. ご清聴有難うございました。

×