About Sass

download About Sass

of 66

  • date post

    14-May-2015
  • Category

    Documents

  • view

    1.875
  • download

    5

Embed Size (px)

description

Slide for Sass

Transcript of About Sass

  • 1.CSSSass Minoru Hayakawa12112

2. CSS CSS Sass,LESS,Stylus Sass Sass 12112 3. CSS - - mixin,extend,,,12112 4. CSS IE4095 CSS12112 5. CSSSass LESS StylusRuby JavaScript Node.jsRuby JSNodeSass Stylus LESS 12112 6. Why Sass?12112 7. LESS - - - JavaScript- - LESS12112 8. Stylus()SassLESS12112 9. Sass Scss CompassSass12112 10. SassScss12112 11. SassScss()Sass(.sass) Scss(.scss)$color: #000000; $color: #000000;#header#header { width: 100%;width: 100%; background: $color; background: $color; }12112 12. SassScss()Sass Scsstabletable { border-space: 0; border-space: 0; th th { text-align: left;text-align: left;}}12112 13. Scss Sass CSSSass Sass12112 14. Sass12112 15. RubyWindowsSass- sudo gem install sass12112 16. 12112 17. _symbol.scss mixinCSS base.scss style.scss12112 18. _symbol.scss mixin scss12112 19. _symbol.scss_symbol.scssCSS base.scss style.scss12112 20. _symbol.scss @import12112 21. ScssCSS12112 22. cd /Applications/MAMP/htdocs/sass/css12112 23. sass --watch style.scss:style.css scsscsscontrol+C12112 24. Sass12112 25. 12112 26. 12112 27. scss12112 28. css12112 29. &12112 30. 12112 31. & 12112 32. CSS12112 33. 12112 34. _symbol.scss style.scss12112 35. Mixin12112 36. _symbol.scss@mixin style.scss@include12112 37. _symbol.scss style.scssstyle.css12112 38. clearx_symbol.scssstyle.scss12112 39. clearxstyle.css12112 40. 12112 41. style.scssstyle.css12112 42. Extend12112 43. style.scss@extendstyle.css12112 44. Extend12112 45. 12112 46. 12112 47. Sass3.212112 48. %CSS12112 49. style.scss12112 50. 12112 51. Extend12112 52. @extend- - mixin12112 53. 12112 54. percentage() (px)%style.scssstyle.css12112 55. oor() style.scssstyle.css round(),ceil()12112 56. abs() --- quote() --- unquote() --- red(), green(), blue() --- RGB alpha(),opacity() --- hue(),saturation(),lightness() --- HSL12112 57. rgb() --- RGB hsl() --- HSL rgba() --- RGBA hsla() --- HSLARGBA transparentize() --- opacify() --- darken() --- 12112 58. desaturate() --- grayscale() --- complement() --- invert() --- mix() --- 2 type-of() --- unit() --- more......12112 59. .......... @importCSS12112 60. reset.cssbase.cssstyle.css font.css CSS@import CSS 12112 61. reset.scssbase.scssstyle.scssfont.scss Sass@importscssCSS 12112 62. style.scss12112 63. style.css12112 64. 12112 65. SassScss CSS Sass- MixinExtend- SassCompass12112 66. 12112