Your SlideShare is downloading. ×
0
Sass, Compass
DIE — Duplication Is       Evil
.round {   border-radius: 10px;   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   -o-border-radius: 10px;   -ms...
SASS
SCSS                    SASSheader{                 header  text-align: center;     text-align: center  h2{               ...
Ни былин,    ни эпосов,        ни эпопей.Телеграммой    лети,        строфа!Воспаленной губой    припади        и попейиз ...
SCSS — обратная совместимость
Каскадность
header                        header {  background: black             background: black;  h2                          }   ...
Переменные
$width: 500px$height: 400px.center-absolute  background: #f2c98a  width: $width  height: $height  position: absolute  left...
$varclass: cahoona.big-#{$varclass}    width: 2em
Примеси
@mixin font($size)   font: $size Georgia, serifh1   +font(48px)p   +font(14px)h1{   font: 48px Georgia, serif;}p{   font: ...
Цвета
$color: #f00.somebox    border: 1px solid $color    box-shadow: 0 0 3px darken($color, 10%),inset 1px 0 lighten($color, 40...
.somebox    background: rgba(#fff, 0.5).somebox {    background: rgba(255, 255, 255, 0.5);}
rgb($red, $green, $blue)rgba($red, $green, $blue, $alpha)rgba($color, $alpha)red($color)green($color)blue($color)mix($colo...
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
@extend
.food    background-image: url(food-sprite.png).food-bacon    @extend .food    background-position: 0 -10px    width: 25px...
.food, .food-bacon, .food-pizza{  background-image: url(food-sprite.png);}.food-bacon{  background-position: 0 -10px;  wid...
@if, @else
@mixin color($type)  @if $type == chocolate    color: brown  @else if $type == pizza    color: red  @else if $type == appl...
@for, @while
@for $i from 1 through 3  .item-#{$i}    width: 1em + $i.item-1 {  width: 2em;}.item-2 {  width: 3em;}.item-3 {  width: 4e...
@each
@each $color in red, green, gray  .theme-#{$color}    background: $color.theme-red{  background: red;}.theme-green{  backg...
@import
master.sass  @import “main.sass”  @import “index.sass”  @import “profile.sass”master.css  main.css + index.css + profile.css
Compass
— Nathan Smith
Border-radius.round  +border-radius(25px)
.round   +border-radius(25px).round {   -webkit-border-radius: 25px;   -moz-border-radius: 25px;   -o-border-radius: 25px;...
Box-shadow.shadow   +box-shadow(0 0 4px #ccc).shadow {    -moz-box-shadow: 0 0 4px #cccccc;    -webkit-box-shadow: 0 0 4px...
Градиенты.gradient    +background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa)).gradient {    background-image: -...
.beauty-box    +border-radius(25px)    +box-shadow(0 0 4px #ccc)    +background-image(linear-gradient(#fff, #ccc 30%, #bbb...
Еще примесиBackground ClipBackground OriginBackground SizeBoxBox SizingColumnsClearfixFont FaceInline BlockOpacityTransitio...
http://compass-style.org/reference/compass/css3/
Спрайты
fb.png   vk.png   twi.png$sprite: sprite-map("ico/*.png").fb  background: sprite($sprite, fb).vk  background: sprite($spri...
ico-s2e5fe71d31.png.fb {  background: url(images/ico-s2e5fe71d31.png) 0 0px no-repeat;}.vk {  background: url(images/ico-s...
.basebox  background: inline-image("pic.png").basebox {  background: url(data:image/png;base64,1UcAAA...AASUVORK5CYII=);}
Config.rb# You can select your preferred output style here (can be overridden via thecommand line):# output_style = :expand...
УстановкаWindows   1. http://rubyinstaller.org/downloads/          2. gem install haml          3. gem install haml/edge  ...
Как это работаетcompass create <projectname> - создаетcompass-проектcompass watch - следит за изменениями вsass-файлах и с...
Что почитатьhttp://sass-lang.com/http://compass-style.org/http://chriseppstein.github.com/http://nex-3.com/http://thesassw...
СпасибоВопросы?                    @lazio_od           sd@evilmartians.com           www.evilmartians.ru           Дыниовс...
Upcoming SlideShare
Loading in...5
×

Sass, Compass

1,754

Published on

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

No Downloads
Views
Total Views
1,754
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Sass, Compass"

    1. 1. Sass, Compass
    2. 2. DIE — Duplication Is Evil
    3. 3. .round { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; }
    4. 4. SASS
    5. 5. SCSS SASSheader{ header text-align: center; text-align: center h2{ h2 font-size: 48px; font-size: 48px }}SCSS — Sassy CSSSASS — Syntactically Awesome Stylesheets
    6. 6. Ни былин, ни эпосов, ни эпопей.Телеграммой лети, строфа!Воспаленной губой припади и попейиз реки по имени — "Факт". В. Маяковский
    7. 7. SCSS — обратная совместимость
    8. 8. Каскадность
    9. 9. header header { background: black background: black; h2 } font: header h2 { weight: normal font-weight: normal; size: 48px font-size: 48px; }a a { color: blue color: blue; &:hover } text-decoration: none a:hover { &::before text-decoration: none; content: “Sosiska” } a::before { content: “Sosiska”; }
    10. 10. Переменные
    11. 11. $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)
    12. 12. $varclass: cahoona.big-#{$varclass} width: 2em
    13. 13. Примеси
    14. 14. @mixin font($size) font: $size Georgia, serifh1 +font(48px)p +font(14px)h1{ font: 48px Georgia, serif;}p{ font: 14px Georgia, serif;}
    15. 15. Цвета
    16. 16. $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;}
    17. 17. .somebox background: rgba(#fff, 0.5).somebox { background: rgba(255, 255, 255, 0.5);}
    18. 18. rgb($red, $green, $blue)rgba($red, $green, $blue, $alpha)rgba($color, $alpha)red($color)green($color)blue($color)mix($color-1, $color-2, [$weight])hsl($hue, $saturation, $lightness)hsla($hue, $saturation, $lightness, $alpha)hue($color)saturation($color)lightness($color)adjust-hue($color, $degrees)lighten($color, $amount)darken($color, $amount)saturate($color, $amount)desaturate($color, $amount)grayscale($color)complement($color)invert($color)alpha($color) / opacity($color)rgba($color, $alpha)opacify($color, $amount) / fade-in($color, $amount)transparentize($color, $amount) / fade-out($color, $amount)
    19. 19. http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
    20. 20. @extend
    21. 21. .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
    22. 22. .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;}
    23. 23. @if, @else
    24. 24. @mixin color($type) @if $type == chocolate color: brown @else if $type == pizza color: red @else if $type == apple color: green @else color: black.pizza +color(pizza)
    25. 25. @for, @while
    26. 26. @for $i from 1 through 3 .item-#{$i} width: 1em + $i.item-1 { width: 2em;}.item-2 { width: 3em;}.item-3 { width: 4em;}
    27. 27. @each
    28. 28. @each $color in red, green, gray .theme-#{$color} background: $color.theme-red{ background: red;}.theme-green{ background: green;}.theme-gray{ background: gray;}
    29. 29. @import
    30. 30. master.sass @import “main.sass” @import “index.sass” @import “profile.sass”master.css main.css + index.css + profile.css
    31. 31. Compass
    32. 32. — Nathan Smith
    33. 33. Border-radius.round +border-radius(25px)
    34. 34. .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; }
    35. 35. Box-shadow.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;}
    36. 36. Градиенты.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);}
    37. 37. .beauty-box +border-radius(25px) +box-shadow(0 0 4px #ccc) +background-image(linear-gradient(#fff, #ccc 30%, #bbb 70%, #aaa)).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(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);}
    38. 38. Еще примесиBackground ClipBackground OriginBackground SizeBoxBox SizingColumnsClearfixFont FaceInline BlockOpacityTransitionTransform
    39. 39. http://compass-style.org/reference/compass/css3/
    40. 40. Спрайты
    41. 41. fb.png vk.png twi.png$sprite: sprite-map("ico/*.png").fb background: sprite($sprite, fb).vk background: sprite($sprite, vk).twi background: sprite($sprite, twi)
    42. 42. 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;}
    43. 43. .basebox background: inline-image("pic.png").basebox { background: url(data:image/png;base64,1UcAAA...AASUVORK5CYII=);}
    44. 44. Config.rb# You can select your preferred output style here (can be overridden via thecommand line):# output_style = :expanded or :nested or :compact or :compressedoutput_style = :compressed
    45. 45. УстановкаWindows 1. http://rubyinstaller.org/downloads/ 2. gem install haml 3. gem install haml/edge 4. gem install compassMac 1. gem install haml 2. gem install haml/edge 3. gem install compassLinux 1. sudo apt-get install ruby 2. gem install haml 3. gem install haml/edge 4. gem install compass
    46. 46. Как это работаетcompass create <projectname> - создаетcompass-проектcompass watch - следит за изменениями вsass-файлах и сразу компилирует их в css
    47. 47. Что почитатьhttp://sass-lang.com/http://compass-style.org/http://chriseppstein.github.com/http://nex-3.com/http://thesassway.com/
    48. 48. СпасибоВопросы? @lazio_od sd@evilmartians.com www.evilmartians.ru Дыниовский Сергей
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×