The document provides an overview of Sass and Compass features for CSS preprocessing. It discusses how Sass and Compass can be installed on different platforms and how they are used to generate CSS. It also summarizes key Sass concepts like nesting, variables, mixins and functions that allow generating CSS rules programmatically. Compass is introduced as a library that builds on Sass to provide CSS3 features and sprites generation.

1. Friday, May 4, 12

2. Sass, Compass
Friday, May 4, 12

3. DIE – Duplication is evil
Friday, 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. Sass
Friday, 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 Stylesheets
Friday, May 4, 12

12. table{
width: 100%;
tr{
td{
background: #edaeda;
p{
font-size: 14px;
}
}
}
}
SCSS — Sassy CSS
Friday, 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. @extend
Friday, 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
@extend
Friday, 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;
}
@extend
Friday, May 4, 12

32. @import
Friday, May 4, 12

33. master.sass
@import “main.sass”
@import “index.sass”
@import “profile.sass”
master.css
main.css + index.css + profile.css
@import
Friday, 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. Compass
Friday, May 4, 12

37. Friday, May 4, 12

38. .round
+border-radius(25px)
CSS3
Friday, 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;
}
CSS3
Friday, 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;
}
CSS3
Friday, 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);
}
CSS3
Friday, May 4, 12

42. .beauty-box
+border-radius(25px)
+box-shadow(0 0 4px #ccc)
+background-image(linear-gradient(#fff, #aaa))
CSS3
Friday, 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(...
}
CSS3
Friday, May 4, 12

44. Background Clip
Background Origin
Background Size
Box
Box Sizing
Columns
Clearfix
Font Face
Inline Block
Opacity
Transition
Transform
CSS3
Friday, May 4, 12

45. http://compass-style.org/reference/compass/css3/
CSS3
Friday, 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=');
}
Base64
Friday, 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.rb
Friday, 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