Официальный сайт мероприятия drupal-sliot.by

1. SASS & LESS

2. проблемы css
● структура отсутствует
● нельзя быстро поменять код
● необходимо писать костыли
● производительность

3. методы борьбы
● переменные
● области видимости
● повторы кода в отдельные блоки

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

5. выход есть

6. холивар
LESS SASS
● проще ● больше возможностей
● поддержка javascript ● совместимый с CSS

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

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

9. compass
● кросcбраузерные стили
● основа - SASS

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

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

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

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

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

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

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

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

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

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

20. разные фичи
● условия
● циклы
● перегрузка функций
● интерполяция переменных
● функции работы с цветом
● пространства имен
● режимы вывода

21. установка

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

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

24. итоги
● удобно
● несложно
● доступно
● будет в D8

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

26. спасибо за внимание!