Se ha denunciado esta presentación.

About Sass

10

Compartir

Próximo SlideShare
Sass 超入門
Sass 超入門
Cargando en…3
×
1 de 66
1 de 66

About Sass

10

Compartir

Descargar para leer sin conexión

Descripción

Slide for Sass

Transcripción

  1. 1. CSS拡張言語 Sassの基本と機能について Minoru Hayakawa 12年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 sass 12年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.scss 12年11月2日金曜日
  20. 20. _symbol.scssの読み込み • @importで読み込む 12年11月2日金曜日
  21. 21. ScssからCSSにコンパイル 12年11月2日金曜日
  22. 22. 開発ディレクトリに移動 例: cd /Applications/MAMP/htdocs/sass/css 12年11月2日金曜日
  23. 23. sass --watch style.scss:style.css ※ scssを更新する度に自動でcssファイルをアップデー トしてくれるので、再度このコマンドを打つ必要はない ストップすると きは、control+C 12年11月2日金曜日
  24. 24. Sassの機能 12年11月2日金曜日
  25. 25. ネスト 子孫セレクタを使う場合に用いる 12年11月2日金曜日
  26. 26. 12年11月2日金曜日
  27. 27. scss 12年11月2日金曜日
  28. 28. css 12年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.scss 12年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.css 12年11月2日金曜日
  38. 38. clearfix _symbol.scss style.scss 12年11月2日金曜日
  39. 39. clearfix style.css 12年11月2日金曜日
  40. 40. ベンダープレフィックス 12年11月2日金曜日
  41. 41. style.scss style.css 12年11月2日金曜日
  42. 42. Extend あるスタイルを定義したセレクタを継承させる機能 12年11月2日金曜日
  43. 43. style.scss @extendを用いる style.css 12年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.scss 12年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.css 12年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.scss 12年11月2日金曜日
  63. 63. style.css 12年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日金曜日

Descripción

Slide for Sass

Transcripción

  1. 1. CSS拡張言語 Sassの基本と機能について Minoru Hayakawa 12年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 sass 12年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.scss 12年11月2日金曜日
  20. 20. _symbol.scssの読み込み • @importで読み込む 12年11月2日金曜日
  21. 21. ScssからCSSにコンパイル 12年11月2日金曜日
  22. 22. 開発ディレクトリに移動 例: cd /Applications/MAMP/htdocs/sass/css 12年11月2日金曜日
  23. 23. sass --watch style.scss:style.css ※ scssを更新する度に自動でcssファイルをアップデー トしてくれるので、再度このコマンドを打つ必要はない ストップすると きは、control+C 12年11月2日金曜日
  24. 24. Sassの機能 12年11月2日金曜日
  25. 25. ネスト 子孫セレクタを使う場合に用いる 12年11月2日金曜日
  26. 26. 12年11月2日金曜日
  27. 27. scss 12年11月2日金曜日
  28. 28. css 12年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.scss 12年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.css 12年11月2日金曜日
  38. 38. clearfix _symbol.scss style.scss 12年11月2日金曜日
  39. 39. clearfix style.css 12年11月2日金曜日
  40. 40. ベンダープレフィックス 12年11月2日金曜日
  41. 41. style.scss style.css 12年11月2日金曜日
  42. 42. Extend あるスタイルを定義したセレクタを継承させる機能 12年11月2日金曜日
  43. 43. style.scss @extendを用いる style.css 12年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.scss 12年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.css 12年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.scss 12年11月2日金曜日
  63. 63. style.css 12年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日金曜日

Más Contenido Relacionado

×