Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sassをはじめよう!

 Sassをはじめよう!

DIST.1 「Sass」 発表資料

448jp | OKI Yoshiya

February 17, 2014
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Technology

Transcript

  1. Sassをはじめよう! 沖 良矢(世路庵) 2014.2.14 (Fri) DIST.1 「Sass」

  2. 自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー UNIQLO HAPPY

    GIFT (2013) Web Designing (2009~) McCANN WG JAPAN (2012)
  3. お品書き Sassとは何か 制作環境のセットアップ 実用テクニック

  4. Sassについて、 一番知りたいことって なんですか? What do you want to know most

    about Sass?
  5. Sassとは何か Chapter.1 | What’s Sass ?

  6. Sass is the most mature, stable, and powerful professional grade

    CSS extension language in the world. http://sass-lang.com/
  7. Sassは、世界で最も成熟し安定 した、かつパワフルなプロ級の CSSの拡張言語である。 http://sass-lang.com/

  8. とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom:

    1em; } #content p { line-height: 2em; }
  9. とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom:

    1em; } #content p { line-height: 2em; } #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } }
  10. サス【Sass】 ≪Syntactically Awesome Style Sheets≫ 構文的に イケてる スタイルシート CSSを効率よく記述するための拡張言語 CSSプリプロセッサ、CSSメタ言語とも

  11. 他のCSSプリプロセッサ LESS Bootstrapで採用 機能はSassより少ない クライアントサイドで動的 にCSSを生成 Stylus Node.jsのモジュールとし て誕生 簡素化した記述

  12. Sassの ここがイイ!  すべてのバージョンのCSSとの互換性  機能が豊富  7年以上に渡る開発、サポート  採用企業が多い

    (LINE, COOKPAD, CyberAgent, NHN Japan…)  ユーザー数が多い  フレームワークの充実
  13. SASS記法とSCSS記法 #content background-color: #ff0000 h1 margin-bottom: 1em p line-height: 2em

    #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } } SASS記法 SCSS記法
  14. Sassの利用手順 1. Sassファイルを記述する なお、拡張子は「.scss」(SASS記法では「.sass」) 2. 直接Webブラウザに読み込めないので、コンパイルし てCSSに変換 3. CSSとしてWebブラウザに読み込む

  15. ルールのネスト #content { background-color: #ff0000; h1 { margin-bottom: 1em; }

    p { line-height: 2em; } } #content { background-color: red; } #content h1 { margin-bottom: 1em; } #content p { line-height: 2em; } Sass CSS
  16. 親セレクタの参照 #content a { background-color: #ff0000; &:hover { background-color: #ffff00;

    } } #content a { background-color: #ff0000; } #content a:hover { background-color: #ffff00; } Sass CSS
  17. プロパティのネスト #content .book { border: { left: 5px solid #ff0000;

    bottom: { width: 5px; style: solid; color: #ff0000; } } } #content .book { border-left: 5px solid #FF0000; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #FF0000; } Sass CSS
  18. 1行コメント // イケてるスタイル #content { background-color: #ff0000; } #content {

    background-color: #ff0000; } Sass CSS
  19. 通常のコメント /* イケてるスタイル */ #content { background-color: #ff0000; } /*

    イケてるスタイル */ #content { background-color: #ff0000; } Sass CSS
  20. 通常のコメント(compressedフォーマットの場合) /* イケてるスタイル */ #content { background-color: #ff0000; } #content{background-color:#ff0000;}

    Sass CSS
  21. 絶対に残るコメント(compressedフォーマットの場合も) /*! 絶対にイケてるスタイル */ #content { background-color: #ff0000; } /*!

    絶対にイケてるスタイル */#content{background-color:#ff0000;} Sass CSS
  22. 変数 $niceColor: #ff0000; #content { background-color: $niceColor; h1 { border-bottom:

    1px solid $niceColor; } } #content { background-color: red; } #content h1 { border-bottom: 1px solid red; } Sass CSS
  23. 変数のスコープ #content { $niceColor: #ff0000; background-color: $niceColor; } h1 {

    border-bottom: 1px solid $niceColor; } error screen.scss (Line 6: Undefined variable: "$niceColor".) Sass CSS
  24. 四則演算 #content { background-color: #ff0000; width: 980px – 40px; }

    #content { background-color: #ff0000; width: 940px; } Sass CSS
  25. 関数 #content { background-color: lighten(#ff0000, 20%); } #content { background-color:

    #ff6666; } Sass CSS
  26. 独自の関数 @function getDouble($value) { @return $value * 2; } #content

    { background-color: #ff0000; width: getDouble(200px); } #content { background-color: #ff0000; width: 400px; } Sass CSS
  27. インターポレーション(補間) $imageBasePath: "images/"; #content { background-image: url(#{$imageBasePath}hoge.png); } #content {

    background-image: url(images/hoge.png); } Sass CSS
  28. スタイルの継承 .content { background-color: #ff0000; border: 1px solid #000000; }

    .sub { @extend .content; } .content, .sub { background-color: #ff0000; border: 1px solid #000000; } Sass CSS
  29. ミックスイン @mixin clearfix { &:after { content: ""; clear: both;

    display: block; } } .content { @include clearfix; background-color: #ff0000; } .content { background-color: #ff0000; } .content:after { content: ""; clear: both; display: block; } Sass CSS
  30. ミックスイン(引数) @mixin myBorder($width) { border: $width solid #00ff00; } .content

    { @include myBorder(5px); background-color: #ff0000; } .content { border: 5px solid lime; background-color: #ff0000; } Sass CSS
  31. その他の機能 @import パーシャル プレースホルダーセレクタ 変数のデフォルト値 可変長引数 コンテンツブロック コントロールディレクティブ コマンドオプション 他、多数

  32. 制作環境のセットアップ Chapter.2 | Setup the production environment

  33. Sassの利用環境 Webサービス GUI CUI IDE

  34. デモ

  35. 実用テクニック Chapter.3 | Practical technique

  36. 時間の都合で省略… 別の機会で。

  37. まとめ At the end

  38. まとめ Sassは、CSSを効率的に書くための拡張言語 制作環境は自分にあったものを

  39. Thank you ! Photo Credit:  mak1e  Nathan O'Nions

     *christopher*  Brett Jordan