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