Css拡張言語のコトハジメ
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Css拡張言語のコトハジメ

  • 3,427 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,427
On Slideshare
2,060
From Embeds
1,367
Number of Embeds
8

Actions

Shares
Downloads
23
Comments
0
Likes
6

Embeds 1,367

http://creator-life.net 806
http://webcake.no003.info 424
http://yuru-fuwa.com 128
http://ss.dotbranch.com 4
http://creatorlife.localdev 2
http://webcache.googleusercontent.com 1
http://s.deeeki.com 1
http://digg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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