Sass&less на Drupal-слёте

проблемы css

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

методы борьбы

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

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

холивар

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

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

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

compass

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

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

вложенные условия
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;
} }

вложенные условия
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; }

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

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

переменные
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; }
}

примеси
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; }

примеси
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; }

функции и операторы
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%);
}
}

функции и операторы
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); }

разные фичи

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

консоль

● Node.js
npm install less
sudo apt get install node-less

● Ruby gem
gem 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

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

Sass&less на Drupal-слёте

More Related Content

Viewers also liked (14)

Similar to Sass&less на Drupal-слёте (20)

More from zabej (20)

Sass&less на Drupal-слёте