About Sass

2,138 views
2,100 views

Published on

Slide for Sass

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

No Downloads
Views
Total views
2,138
On SlideShare
0
From Embeds
0
Number of Embeds
447
Actions
Shares
0
Downloads
12
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

About Sass

  1. 1. CSS拡張言語 Sassの基本と機能について Minoru Hayakawa12年11月2日金曜日
  2. 2. アジェンダ • CSS拡張言語のメリットとデメリット • CSS拡張言語の種類 • Sass,LESS,Stylusについて • Sassのインストール • 開発にするにあたって • Sassの機能 • まとめ12年11月2日金曜日
  3. 3. CSS拡張言語を使うメリット • メンテナンス性の向上 - 冗長な記述の排除、再利用性のあるコード が書ける • 開発効率向上 - mixin,extend,関数,変数,ネスト12年11月2日金曜日
  4. 4. CSS拡張言語を使うデメリット (注意点) • 独自記法の学習コスト • IE9のセレクタ数制限により陥りやすい (4095セレクタが制限) • クライアント側でCSS修正がはいる場合 は双方の確認が必要12年11月2日金曜日
  5. 5. CSS拡張言語の種類 Sass LESS Stylus Ruby JavaScript Node.js Rubyインストール JSライブラリ Nodeインストール Sassインストール (クライアントサイド) Stylusインストール LESSインストール (サーバーサイド)12年11月2日金曜日
  6. 6. Why Sass?12年11月2日金曜日
  7. 7. LESS • クライアントサイドかサーバーサイド - クライアントサイド - パフォーマンス的にどうなの? - JavaScript無効環境では使えない - サーバーサイド - LESSがインストールできるか確認する必要がある12年11月2日金曜日
  8. 8. Stylus ようわからん (`・ω・´)キリッ SassとLESSと構文が異なるので、 学習コストが高い(多分)12年11月2日金曜日
  9. 9. Sass • ローカルの開発環境だけでコンパイル 可能 • Scss記法で学習コスト低減 • Compass(Sassフレームワーク)12年11月2日金曜日
  10. 10. Sass記法 Scss記法12年11月2日金曜日
  11. 11. SassとScssの記述例(変数) Sass(.sass) Scss(.scss) $color: #000000; $color: #000000; #header #header { width: 100%; width: 100%; background: $color; background: $color; }12年11月2日金曜日
  12. 12. SassとScssの記述例(ネスト) Sass Scss table table { border-space: 0; border-space: 0; th th { text-align: left; text-align: left; } }12年11月2日金曜日
  13. 13. なぜScss記法か • Sass記法よりも可読性が良い • CSSの記述をそのままSassにできる • 段階的にSassの知識を伸ばしていける12年11月2日金曜日
  14. 14. Sassのインストール12年11月2日金曜日
  15. 15. • Rubyをインストール(Windowsのみ) • Sassのインストール - sudo gem install sass12年11月2日金曜日
  16. 16. 開発にあたって12年11月2日金曜日
  17. 17. _symbol.scss 変数やmixinを定義 CSS base.scss 基本となるスタイル定義 style.scss 基本となるスタイル定義12年11月2日金曜日
  18. 18. _symbol.scssを用意する理由 • 変数やmixinの管理をしやすくするため • 変数などはscssの上部に記述する必要が あるため、参照する度にファイル内で 上下に行ったり来たりを避けるため12年11月2日金曜日
  19. 19. _symbol.scssの読み込み _symbol.scss CSS base.scss style.scss12年11月2日金曜日
  20. 20. _symbol.scssの読み込み • @importで読み込む12年11月2日金曜日
  21. 21. ScssからCSSにコンパイル12年11月2日金曜日
  22. 22. 開発ディレクトリに移動 例: cd /Applications/MAMP/htdocs/sass/css12年11月2日金曜日
  23. 23. sass --watch style.scss:style.css ※ scssを更新する度に自動でcssファイルをアップデー トしてくれるので、再度このコマンドを打つ必要はない ストップすると きは、control+C12年11月2日金曜日
  24. 24. Sassの機能12年11月2日金曜日
  25. 25. ネスト 子孫セレクタを使う場合に用いる12年11月2日金曜日
  26. 26. 12年11月2日金曜日
  27. 27. scss12年11月2日金曜日
  28. 28. css12年11月2日金曜日
  29. 29. &キーワード12年11月2日金曜日
  30. 30. 12年11月2日金曜日
  31. 31. &キーワード • 親セレクタの参照12年11月2日金曜日
  32. 32. おまけ • CSSプロパティのネスト記法もある12年11月2日金曜日
  33. 33. 変数12年11月2日金曜日
  34. 34. _symbol.scss style.scss12年11月2日金曜日
  35. 35. Mixin プロパティやセレクタの再利用を可能とする機能12年11月2日金曜日
  36. 36. _symbol.scss @mixinで定義 style.scss @includeで指定12年11月2日金曜日
  37. 37. _symbol.scss 引数を与える style.scss 使う場面で引数に値を指定 style.css12年11月2日金曜日
  38. 38. clearfix _symbol.scss style.scss12年11月2日金曜日
  39. 39. clearfix style.css12年11月2日金曜日
  40. 40. ベンダープレフィックス12年11月2日金曜日
  41. 41. style.scss style.css12年11月2日金曜日
  42. 42. Extend あるスタイルを定義したセレクタを継承させる機能12年11月2日金曜日
  43. 43. style.scss @extendを用いる style.css12年11月2日金曜日
  44. 44. Extendの注意点12年11月2日金曜日
  45. 45. 12年11月2日金曜日
  46. 46. セレクタまで継承されるので、意図しないスタイル があてられる可能性がある12年11月2日金曜日
  47. 47. プレースホルダーセレクタ Sass3.2より追加された機能12年11月2日金曜日
  48. 48. %で指定。CSSには表示されない12年11月2日金曜日
  49. 49. style.scss12年11月2日金曜日
  50. 50. 12年11月2日金曜日
  51. 51. Extendをまとめると12年11月2日金曜日
  52. 52. • @extendを用いる場合、セレクタのル ールを決める - プレースホルダーセレクタを用いる - 但し、mixinと差別化をどう図るかが必要12年11月2日金曜日
  53. 53. 関数12年11月2日金曜日
  54. 54. • percentage() 数値(px)を%に変換 style.scss style.css12年11月2日金曜日
  55. 55. • floor() 小数点を切り捨て style.scss style.css 関連:round(),ceil()12年11月2日金曜日
  56. 56. • abs() --- 絶対値を取得 • quote() --- クォートする • unquote() --- クォートを取り除く • red(), green(), blue() --- RGB形式から値 を抜き出す • alpha(),opacity() --- 透明度を取得 • hue(),saturation(),lightness() --- HSL形 式から値を抜き出す12年11月2日金曜日
  57. 57. • rgb() --- RGB形式に変換 • hsl() --- HSL形式に変換 • rgba() --- RGBA形式に変換 • hsla() --- HSLA形式をRGBA形式に変換 • transparentize() --- より透明 • opacify() --- より不透明にする • darken() --- 輝度を下げる12年11月2日金曜日
  58. 58. • desaturate() --- 輝度を上げる • grayscale() --- グレースケールにする • complement() --- 補色にする • invert() --- 反転色にする • mix() --- 2色の中間色を取得する • type-of() --- 値の型を取得 • unit() --- 値の単位を取得 more......12年11月2日金曜日
  59. 59. 最後に.......... @importでCSSファイルを一つにする12年11月2日金曜日
  60. 60. reset.css base.css style.css font.css CSSの@importルールはパフォーマンスの意味合いで最近は 使われない、またパフォーマンスの件でも複数のCSSを指定 しない傾向にある12年11月2日金曜日
  61. 61. reset.scss base.scss style.scss font.scss Sassの@importで複数のscssをひとつのCSSとしてコンパイ ルさせる。複数で開発する場合は、非常に有効。12年11月2日金曜日
  62. 62. style.scss12年11月2日金曜日
  63. 63. style.css12年11月2日金曜日
  64. 64. まとめ12年11月2日金曜日
  65. 65. • Sassの場合は、Scss記法のことを指すこ とがほとんど • CSSの問題を軽減し、開発効率があがる • Sassの機能をすべて理解する必要はな いが・・・・ - MixinやExtendを使ってコードの再利用性を 高め、メンテナンス性を上げる - SassのフレームワークのCompassを使うこ とにより、より開発効率があがる12年11月2日金曜日
  66. 66. おしまい12年11月2日金曜日

×