SASS, Compass 1.1

1,074 views
962 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,074
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SASS, Compass 1.1

  1. 1. Friday, May 4, 12
  2. 2. Sass, CompassFriday, May 4, 12
  3. 3. DIE – Duplication is evilFriday, May 4, 12
  4. 4. .round { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }Friday, May 4, 12
  5. 5. SassFriday, May 4, 12
  6. 6. Windows http://rubyinstaller.org/downloads/ $ gem install haml $ gem install haml/edge Mac $ gem install haml $ gem install haml/edge Linux $ sudo apt-get install ruby $ gem install haml $ gem install haml/edge УстановкаFriday, May 4, 12
  7. 7. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css Как это работаетFriday, May 4, 12
  8. 8. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css *.sass *.css Как это работаетFriday, May 4, 12
  9. 9. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css *.sass *.css Как это работаетFriday, May 4, 12
  10. 10. СинтаксисFriday, May 4, 12
  11. 11. table width: 100% tr td background: #edaeda p font-size: 14px SASS — Syntactically Awesome StylesheetsFriday, May 4, 12
  12. 12. table{ width: 100%; tr{ td{ background: #edaeda; p{ font-size: 14px; } } } } SCSS — Sassy CSSFriday, May 4, 12
  13. 13. SASS — лаконичностьFriday, May 4, 12
  14. 14. SCSS — обратная совместимостьFriday, May 4, 12
  15. 15. ВложенностьFriday, May 4, 12
  16. 16. .sidebar .sidebar { background: black background: black; h2 } font-size: 20px .sidebar h2 { a font-size: 20px color: blue } &:hover .sidebar a { text-decoration: none color: blue; } .sidebar a:hover { text-decoration: none; } ВложенностьFriday, May 4, 12
  17. 17. h2 h2{ font: font-style: italic; style: italic font-weight: bold; weight: bold font-size: 12px; size: 12px font-family: sans-serif; family: sans-serif } ВложенностьFriday, May 4, 12
  18. 18. ПеременныеFriday, May 4, 12
  19. 19. $text-color: #edaeda $content-text: FUUUUUUUuuuuuu $headlines-font: Arial, Helvetica, sans-serif $true: false ПеременныеFriday, May 4, 12
  20. 20. $width: 500px $height: 400px .center-absolute background: #f2c98a width: $width height: $height position: absolute left: 50% top: 50% margin-top: -($height/2) margin-left: -($width/2) ПеременныеFriday, May 4, 12
  21. 21. $varclass: cahoona .big-#{$varclass} width: 2em ПеременныеFriday, May 4, 12
  22. 22. ПримесиFriday, May 4, 12
  23. 23. @mixin font($size) font: $size Georgia, serif h1 +font(48px) p +font(14px) h1{ font: 48px Georgia, serif; } p{ font: 14px Georgia, serif; } ПримесиFriday, May 4, 12
  24. 24. ФункцииFriday, May 4, 12
  25. 25. $color: #f00 .somebox border: 1px solid $color box-shadow: 0 0 3px darken($color, 10%), inset 1px 0 lighten($color, 40%) .somebox { border: 1px solid red; box-shadow: 0 0 3px #cc0000, inset 1px 0 #ffcccc; } ФункцииFriday, May 4, 12
  26. 26. .somebox background: rgba(#fff, 0.5) .somebox { background: rgba(255, 255, 255, 0.5); } ФункцииFriday, May 4, 12
  27. 27. rgb($red, $green, $blue) lighten($color, $amount) rgba($red, $green, $blue, $alpha) darken($color, $amount) rgba($color, $alpha) saturate($color, $amount) red($color) desaturate($color, $amount) green($color) grayscale($color) blue($color) complement($color) mix($color-1, $color-2, [$weight]) invert($color) hsl($hue, $saturation, $lightness) alpha($color) / opacity($color) hsla($hue, $saturation, $lightness, $alpha) rgba($color, $alpha) hue($color) opacify($color, $amount) / fade-in($color, $amount) saturation($color) transparentize($color, $amount) / fade-out($color, $amount) lightness($color) adjust-hue($color, $degrees) Еще функцииFriday, May 4, 12
  28. 28. http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html И еще функцииFriday, May 4, 12
  29. 29. @extendFriday, May 4, 12
  30. 30. .food background-image: url(food-sprite.png) .food-bacon @extend .food background-position: 0 -10px width: 25px height: 10px .food-pizza @extend .food background-position: 0 -20px width: 45px height: 35px @extendFriday, May 4, 12
  31. 31. .food, .food-bacon, .food-pizza{ background-image: url(food-sprite.png); } .food-bacon{ background-position: 0 -10px; width: 25px; height: 10px; } .food-pizza{ background-position: 0 -20px; width: 45px; height: 35px; } @extendFriday, May 4, 12
  32. 32. @importFriday, May 4, 12
  33. 33. master.sass @import “main.sass” @import “index.sass” @import “profile.sass” master.css main.css + index.css + profile.css @importFriday, May 4, 12
  34. 34. @if @for, @while @function @each Кроме тогоFriday, May 4, 12
  35. 35. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ПочитатьFriday, May 4, 12
  36. 36. CompassFriday, May 4, 12
  37. 37. Friday, May 4, 12
  38. 38. .round +border-radius(25px) CSS3Friday, May 4, 12
  39. 39. .round +border-radius(25px) .round { -webkit-border-radius: 25px; -moz-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; } CSS3Friday, May 4, 12
  40. 40. .shadow   +box-shadow(0 0 4px #ccc) .shadow {   -moz-box-shadow: 0 0 4px #cccccc;   -webkit-box-shadow: 0 0 4px #cccccc;   -o-box-shadow: 0 0 4px #cccccc;   box-shadow: 0 0 4px #cccccc; } CSS3Friday, May 4, 12
  41. 41. .gradient   +background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa)) .gradient { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(30%, #cccccc), color-stop(70%, #bbbbbb), color-stop(100%, #aaaaaa)); background-image: -webkit-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa); background-image: -moz-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa); background-image: -o-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa); background-image: -ms-linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa); background-image: linear-gradient(#ffffff, #cccccc 30%, #bbbbbb 70%, #aaaaaa); } CSS3Friday, May 4, 12
  42. 42. .beauty-box +border-radius(25px) +box-shadow(0 0 4px #ccc) +background-image(linear-gradient(#fff, #aaa)) CSS3Friday, May 4, 12
  43. 43. .beauty-box { -webkit-border-radius: 25px; -moz-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; -moz-box-shadow: 0 0 4px #cccccc; -webkit-box-shadow: 0 0 4px #cccccc; -o-box-shadow: 0 0 4px #cccccc; box-shadow: 0 0 4px #cccccc; background-image: -webkit-gradient(... color-stop(30%, #cccccc), color-stop(... background-image: -webkit-linear-gradient(... background-image: -moz-linear-gradient(... background-image: -o-linear-gradient(... background-image: -ms-linear-gradient(... background-image: linear-gradient(... } CSS3Friday, May 4, 12
  44. 44. Background Clip Background Origin Background Size Box Box Sizing Columns Clearfix Font Face Inline Block Opacity Transition Transform CSS3Friday, May 4, 12
  45. 45. http://compass-style.org/reference/compass/css3/ CSS3Friday, May 4, 12
  46. 46. ico/fb.png ico/vk.png ico/twi.png $sprite: sprite-map("ico/*.png") .fb background: sprite($sprite, fb) .vk background: sprite($sprite, vk) .twi background: sprite($sprite, twi) СпрайтыFriday, May 4, 12
  47. 47. ico/fb.png ico/vk.png ico/twi.png $sprite: sprite-map("ico/*.png") .fb background: sprite($sprite, fb) .vk background: sprite($sprite, vk) .twi background: sprite($sprite, twi) СпрайтыFriday, May 4, 12
  48. 48. ico/fb.png ico/vk.png ico/twi.png $sprite: sprite-map("ico/*.png") .fb background: sprite($sprite, fb) .vk background: sprite($sprite, vk) .twi background: sprite($sprite, twi) СпрайтыFriday, May 4, 12
  49. 49. ico/fb.png ico/vk.png ico/twi.png $sprite: sprite-map("ico/*.png") .fb background: sprite($sprite, fb) .vk background: sprite($sprite, vk) .twi background: sprite($sprite, twi) СпрайтыFriday, May 4, 12
  50. 50. ico-s2e5fe71d31.png .fb { background: url(images/ico-s2e5fe71d31.png) 0 0px no-repeat; } .vk { background: url(images/ico-s2e5fe71d31.png) 0 -41px no-repeat; } .twi { background: url(images/ico-s2e5fe71d31.png) 0 -82px no-repeat; } СпрайтыFriday, May 4, 12
  51. 51. ico-s2e5fe71d31.png .fb { background: url(images/ico-s2e5fe71d31.png) 0 0px no-repeat; } .vk { background: url(images/ico-s2e5fe71d31.png) 0 -41px no-repeat; } .twi { background: url(images/ico-s2e5fe71d31.png) 0 -82px no-repeat; } СпрайтыFriday, May 4, 12
  52. 52. ico-s2e5fe71d31.png .fb { background: url(images/ico-s2e5fe71d31.png) 0 0px no-repeat; } .vk { background: url(images/ico-s2e5fe71d31.png) 0 -41px no-repeat; } .twi { background: url(images/ico-s2e5fe71d31.png) 0 -82px no-repeat; } СпрайтыFriday, May 4, 12
  53. 53. .basebox background: inline-image("pic.png") .basebox { background: url(data:image/png;base64,1UcAAA...AASUVORK5CYII=); } Base64Friday, May 4, 12
  54. 54. # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed output_style = :compressed Config.rbFriday, May 4, 12
  55. 55. http://sass-lang.com/ http://compass-style.org/ http://chriseppstein.github.com/ http://nex-3.com/ http://thesassway.com/ Что почитатьFriday, May 4, 12
  56. 56. Спасибо Вопросы? @llazio sd@evilmartians.com www.evilmartians.ru Дыниовский СергейFriday, May 4, 12

×