sass&less на drupal-слёте
DESCRIPTION
Официальный сайт мероприятия drupal-sliot.byTRANSCRIPT
SASS & LESS
проблемы css
● структура отсутствует● нельзя быстро поменять код● необходимо писать костыли● производительность
методы борьбы
● переменные● области видимости● повторы кода в отдельные блоки
сss != <язык программирования>
выход есть
холивар
LESS● проще
● поддержка javascript
SASS● больше возможностей
● совместимый с CSS
стоит попробовать оба!
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
compass
● кросcбраузерные стили● основа - SASS
базовые возможности&
синтаксис
вложенные условия
#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
вложенные условия
#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
родительские ссылки
a {
color: #ce4dd6;
&:hover {
color: #ffb3ff; }
&:visited {
color: #c458cb; }
}
a {
color: #ce4dd6; }
a:hover {
color: #ffb3ff; }
a:visited {
color: #c458cb; }
LESS & SCSS CSS
переменные
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
LESS CSS
переменные
$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
примеси
.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
примеси
@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
функции и операторы
@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
функции и операторы
$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
разные фичи
● условия● циклы● перегрузка функций● интерполяция переменных● функции работы с цветом● пространства имен● режимы вывода
установка
консоль
● Node.jsnpm install less
sudo apt get install node-less
● Ruby gemgem install sass
gem install compass
модули
● LESS http://drupal.org/project/less● SASSy http://drupal.org/project/sassy● SASS http://drupal.org/project/sass
итоги
● удобно● несложно● доступно● будет в D8
ссылки
● 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
спасибо за внимание!