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.

About Sass

2,542 views

Published on

Slide for Sass

  • Login to see the comments

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日金曜日

×