An overview of SASS and LESS.

1. SASS & LESS

2. проблемы css
● Отсутствие четкой структуры
● Дублирование
● Нельзя быстро поменять код
● Необходимость писать костыли
● Трудно сохранить оформление кода
● Производительность

3. методы борьбы
● Использовать переменные
● Определять области видимости
● Выделять повторы кода в отдельные блоки
● Следить за наследованием

4. методы борьбы
● Использовать переменные
● Определять области видимости
● Выделять повторы кода в отдельные блоки
● Следить за наследованием

5. сss != <язык программирования>

6. выход есть

7. холивар
LESS
● Простая установка
● Простой синтаксис
● Умеет выполнять
javascript
SASS
● Больше возможностей
● Более совместимый с
CSS

8. стоит попробовать оба!

9. SCSS – диалект SASS
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%); }
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue; }
SASS SCSS

10. compass
● Кросбраузерные стили
● Использует SASS
● Требует Ruby

11. базовые возможности
&
синтаксис

12. вложенные условия
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
LESS CSS

13. вложенные условия
#navbar {
width: 80%;
height: 23px;
ul { list-style-type:
none; }
li {
float: left;
a { font-weight: bold; }
}
}
#navbar {
width: 80%;
height: 23px; }
#navbar ul {
list-style-type:
none; }
#navbar li {
float:
left; }
#navbar li a {
font-weight:
bold; }
SСSS CSS

14. родительские ссылки
a {
color: #ce4dd6;
&:hover {
color: #ffb3ff; }
&:visited {
color: #c458cb; }
}
a {
color: #ce4dd6; }
a:hover {
color: #ffb3ff; }
a:visited {
color: #c458cb; }
LESS & SCSS CSS

15. переменные
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
LESS CSS

16. переменные
$main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style; } }
a {
color: $main-color;
&:hover { border-bottom:
$style 1px; }
}
#navbar {
border-bottom-color:
#ce4dd6;
border-bottom-style:
solid; }
a {
color: #ce4dd6;}
a:hover {
border-bottom: solid
1px; }
SСSS CSS

17. примеси
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header { .rounded-corners; }
#footer { .rounded-corners(10px); }
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; }
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; }
LESS CSS

18. примеси
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius:
$radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }
#footer {
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px; }
#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; }
SСSS CSS

19. функции и операторы
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color:
#7d2717;
}
LESS CSS

20. функции и операторы
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width +
($n - 1) * $gutter-width;
}
#sidebar { width: grid-
width(5); }
#sidebar {
width: 240px; }
SСSS CSS

21. разные фичи

22. LESS.переменные
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}

23. LESS.перегрузка
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}

24. LESS.переменные
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
content: "I am fnord.";
CSS

25. LESS.аргументы
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px)
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
CSS

26. LESS.перегрузка
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}

27. LESS.if
.mixin (@s, @color) { ... }
.mixin (dark, @color) { color:
darken(@color, 10%); }
.mixin (light, @color) { color:
lighten(@color, 10%); }
.mixin (@_, @color) { display:
block; }
@switch: light;
.class {
.mixin(@switch, #888);
}
CSS
.class {
color: #a2a2a2;
display: block;
}

28. LESS.case
.mixin (@a) when (lightness(@a)
>= 50%)
{ background-color: black; }
.mixin (@a) when (lightness(@a)
< 50%)
{ background-color: white; }
.mixin (@a) { color: @a; }
.class1 {
.mixin(#ddd) }
.class2 {
.mixin(#555) }
CSS
.class1 { background-color: black; color: #ddd; }
.class2 { background-color: white; color: #555; }

29. LESS.conditions
● .truth (@a) when (@a) { ... }
● .truth (@a) when (@a = true) { ... } //true != 1
● .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } //и
● .mixin (@a) when (@a > 10), (@a < -10) { ... } // или
● .mixin (@b) when not (@b > 0) { ... }
● @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

30. LESS.is*
● iscolor()
● isnumber()
● isstring()
● iskeyword()
● isurl()
● ispixel()
● ispercentage()
● isem()

31. LESS.&
.child, .sibling {
.parent & { color: black; }
& + & { color: red; }
}
.parent .child, .parent .sibling { color: black; }
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling { color: red; }
CSS

32. LESS.functions
● lighten(@color, 10%); // светлее
● darken(@color, 10%); // темнее
● saturate(@color, 10%); // насыщеннее
● desaturate(@color, 10%); // наоборот
● fadeout(@color, 10%); // прозрачнее
● fadein(@color, 10%); // наоборот
● fade(@color, 50%); // прозрачность = 50%
● spin(@color, 10); // смещение оттенка на +10 градусов
● spin(@color, -10); // наоборот
● mix(@color1, @color2, @weight); смешать в пропорции 50%
● contrast(@color1, @darkcolor, @lightcolor);
// возвращает @darkcolor if @color1 “яркий” ('luma')
// иначе @lightcolor

33. LESS.functions
● hue(@color); // оттенок
● saturation(@color); // насыщенность
● lightness(@color); // яркость
● red(@color); // красный канал
● green(@color); // зеленый
● blue(@color); // синий
● alpha(@color); // альфа
● luma(@color); // яркость (перцептивная)

34. LESS.functions
● round(1.67); // `2`
● ceil(2.4); // `3`
● floor(2.6); // `2`

35. LESS.namespaces
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab () { ... }
.citation () { ... }
}
#header a {
color: orange;
#bundle > .button; }

36. LESS.комментарии
● /* Можно как в CSS. */
.class { color: black }
● // А можно как в с++
.class { color: white }

37. LESS.разное
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
CSS

38. LESS.разное
@name: blocked;
.@{name} {
color: black;
}
.blocked {
color: black;
}
CSS

39. SCSS.&
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration:
underline; }
body.firefox & { font-weight:
normal; }
}
a {
font-weight: bold;
text-decoration:
none; }
a:hover {
text-decoration:
underline; }
body.firefox a {
font-weight:
normal; }
SASS CSS

40. SCSS.namespaces
.funky {
font: 2px/3px {
family: fantasy;
size: 30em;
weight: bold;
}
}
.funky {
font: 2px/3px;
font-family:
fantasy;
font-size: 30em;
font-weight:
bold; }
SCSS CSS

41. SCSS.&
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration:
underline; }
body.firefox & { font-weight:
normal; }
}
a {
font-weight: bold;
text-decoration:
none; }
a:hover {
text-decoration:
underline; }
body.firefox a {
font-weight:
normal; }
SCSS CSS

42. SCSS.интерполяция
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.foo {
border-color: blue; }
SCSS CSS

43. SCSS.переменные
$content: "First content";
$content: "Second content?" !
default;
$new_content: "First time
reference" !default;
#main {
content: $content;
new-content: $new_content;
}
#main {
content: "First
content";
new-content: "First
time reference"; }
SCSS CSS

44. SCSS.@import
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo)
@import "rounded-corners", "text-shadow";

45. SCSS.@extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

46. SCSS.@extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

47. SCSS.@if
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
p { color: green; }
SCSS CSS

48. SCSS.@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em *
$i; }
}
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
SCSS CSS

49. SCSS.@each
@each $animal in puma, sea-
slug, egret {
.#{$animal}-icon {
background-image:
url('/images/#{$animal}.png');
}
}
.puma-icon {
background-image:
url('/images/puma.png')
; }
.sea-slug-icon {
background-image:
url('/images/sea-
slug.png'); }
.egret-icon {
background-image:
url('/images/egret.png'
); }
SCSS CSS

50. SCSS.@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em *
$i; }
$i: $i - 2;
}
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
SCSS CSS

51. SCSS.вывод
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
#main { color: #fff;
background-color: #000;
}
#main p { width:
10em; }
#main{color:#fff;backgr
ound-color:#000}#main
p{width:10em}
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
:nested :compact
:expanded :compressed

52. SCSS.эллипсис
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px
5px #666, 2px 6px 10px #999);
}
.shadowed {
-moz-box-shadow: 0px
4px 5px #666, 2px 6px
10px #999;
-webkit-box-shadow:
0px 4px 5px #666, 2px
6px 10px #999;
box-shadow: 0px 4px,
5px #666, 2px 6px 10px
#999;
}
SCSS CSS

53. SCSS.функции
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width +
($n - 1) * $gutter-width;
}
#sidebar { width: grid-
width(5); }
#sidebar {
width: 240px; }
SCSS CSS

54. установка

55. консоль
● Node.js
npm install less
sudo apt get install node-less
● Ruby gem
gem install sass
gem install compass

56. модули
● LESS http://drupal.org/project/less
● SASSy http://drupal.org/project/sassy
● SASS http://drupal.org/project/sass
● Live CSS http://drupal.org/project/live_css

57. итоги
● Перспективно
● Несложно научиться
● SASS будет в Drupal 8
● Не все доступно на shared хостингах

58. ссылки
● http://lesscss.org/
● sass-lang.com
● http://compass-style.org/
● http://drupal.org/project/compass