Your SlideShare is downloading. ×
0
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
SASS, Compass 1.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SASS, Compass 1.1

905

Published on

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

No Downloads
Views
Total Views
905
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Friday, May 4, 12
  • 2. Sass, CompassFriday, May 4, 12
  • 3. DIE – Duplication is evilFriday, May 4, 12
  • 4. .round { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }Friday, May 4, 12
  • 5. SassFriday, May 4, 12
  • 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. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css Как это работаетFriday, May 4, 12
  • 8. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css *.sass *.css Как это работаетFriday, May 4, 12
  • 9. $ sass --watch <folder> Cледит за изменениями в sass-файлах и компилирует их в css *.sass *.css Как это работаетFriday, May 4, 12
  • 10. СинтаксисFriday, May 4, 12
  • 11. table width: 100% tr td background: #edaeda p font-size: 14px SASS — Syntactically Awesome StylesheetsFriday, May 4, 12
  • 12. table{ width: 100%; tr{ td{ background: #edaeda; p{ font-size: 14px; } } } } SCSS — Sassy CSSFriday, May 4, 12
  • 13. SASS — лаконичностьFriday, May 4, 12
  • 14. SCSS — обратная совместимостьFriday, May 4, 12
  • 15. ВложенностьFriday, May 4, 12
  • 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. 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. ПеременныеFriday, May 4, 12
  • 19. $text-color: #edaeda $content-text: FUUUUUUUuuuuuu $headlines-font: Arial, Helvetica, sans-serif $true: false ПеременныеFriday, May 4, 12
  • 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. $varclass: cahoona .big-#{$varclass} width: 2em ПеременныеFriday, May 4, 12
  • 22. ПримесиFriday, May 4, 12
  • 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. ФункцииFriday, May 4, 12
  • 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. .somebox background: rgba(#fff, 0.5) .somebox { background: rgba(255, 255, 255, 0.5); } ФункцииFriday, May 4, 12
  • 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. http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html И еще функцииFriday, May 4, 12
  • 29. @extendFriday, May 4, 12
  • 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. .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. @importFriday, May 4, 12
  • 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. @if @for, @while @function @each Кроме тогоFriday, May 4, 12
  • 35. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ПочитатьFriday, May 4, 12
  • 36. CompassFriday, May 4, 12
  • 37. Friday, May 4, 12
  • 38. .round +border-radius(25px) CSS3Friday, May 4, 12
  • 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. .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. .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. .beauty-box +border-radius(25px) +box-shadow(0 0 4px #ccc) +background-image(linear-gradient(#fff, #aaa)) CSS3Friday, May 4, 12
  • 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. Background Clip Background Origin Background Size Box Box Sizing Columns Clearfix Font Face Inline Block Opacity Transition Transform CSS3Friday, May 4, 12
  • 45. http://compass-style.org/reference/compass/css3/ CSS3Friday, May 4, 12
  • 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. 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. 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. 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. 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. 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. 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. .basebox background: inline-image("pic.png") .basebox { background: url(data:image/png;base64,1UcAAA...AASUVORK5CYII=); } Base64Friday, May 4, 12
  • 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. http://sass-lang.com/ http://compass-style.org/ http://chriseppstein.github.com/ http://nex-3.com/ http://thesassway.com/ Что почитатьFriday, May 4, 12
  • 56. Спасибо Вопросы? @llazio sd@evilmartians.com www.evilmartians.ru Дыниовский СергейFriday, May 4, 12

×