SASS, Compass 1.1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

SASS, Compass 1.1

on

  • 1,162 views

 

Statistics

Views

Total Views
1,162
Views on SlideShare
1,159
Embed Views
3

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SASS, Compass 1.1 Presentation 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