Page 1

SASS & LESS


проблемы 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 padding: $margin / 2 margin: $margin / 2 border-color: $blue

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }


compass ●

Кросбраузерные стили

Использует SASS

Требует Ruby


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


вложенные условия LESS #header {

CSS #header h1 { font-size: 26px;

h1 { font-size: 26px; font-weight: bold;

font-weight: bold; } #header p {

}

font-size: 12px;

p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } }

} #header p a { text-decoration: none; } #header p a:hover {

} }

border-width: 1px; }


вложенные условия SСSS #navbar {

#navbar {

width: 80%;

width: 80%;

height: 23px;

height: 23px; }

ul { list-style-type: none; }

#navbar ul {

li {

list-style-type: none; }

float: left;

#navbar li {

a { font-weight: bold; }

float: left; } #navbar li a {

} }

CSS

font-weight: bold; }


родительские ссылки LESS & SCSS a {

a { color: #ce4dd6;

color: #ce4dd6; }

&:hover {

a:hover {

color: #ffb3ff; } &:visited { color: #c458cb; } }

CSS

color: #ffb3ff; } a:visited { color: #c458cb; }


переменные LESS @color: #4D926F;

CSS #header {

#header { color: @color; }

color: #4D926F; } h2 {

h2 { color: @color; }

color: #4D926F; }


переменные SСSS

CSS

$main-color: #ce4dd6;

#navbar {

$style: solid;

border-bottom-color: #ce4dd6;

#navbar {

border-bottom-style: solid; }

border-bottom: { color: $main-color; style: $style;

} }

a { color: $main-color; &:hover { border-bottom: $style 1px; } }

a { color: #ce4dd6;} a:hover { border-bottom: solid 1px; }


примеси LESS .rounded-corners (@radius: 5px) {

CSS #header {

-webkit-border-radius: @radius;

-webkit-border-radius: 5px;

-moz-border-radius: @radius;

-moz-border-radius: 5px;

-ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }

-ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;

}

#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 @mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; }

CSS #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; }

#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 @the-border: 1px;

CSS #header {

@base-color: #111; @red:

color: #333;

#842210;

border-left: 1px;

#header {

border-right: 2px;

color: (@base-color * 3); border-left: @the-border;

}

border-right: (@the-border * 2);

#footer {

} #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }

color: #114411; border-color: #7d2717; }


функции и операторы SСSS $grid-width: 40px; $gutter-width: 10px;

@function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; }

#sidebar { width: gridwidth(5); }

CSS #sidebar { width: 240px; }


разные фичи


LESS.переменные @var: red;

#page { @var: white; #header { color: @var; // white } }

#footer { color: @var; // red }


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


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

CSS content: "I am fnord.";


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)

CSS box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;


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


LESS.if .mixin (@s, @color) { ... }

@switch: light;

.mixin (dark, @color) { color: darken(@color, 10%); }

.class {

.mixin (light, @color) { color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; }

CSS .class { color: #a2a2a2; display: block; }

.mixin(@switch, #888); }


LESS.case .mixin (@a) when (lightness(@a) >= 50%)

.class1 { .mixin(#ddd) }

{ background-color: black; }

.class2 { .mixin(#555) }

.mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; }

CSS .class1 { background-color: black; .class2 {

color: #ddd; }

background-color: white; color: #555; }


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 }


LESS.is* ●

iscolor()

isnumber()

isstring()

iskeyword()

isurl()

ispixel()

ispercentage()

isem()


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

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


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);

contrast(@color1, @darkcolor, @lightcolor);

смешать в пропорции 50%

// возвращает @darkcolor if @color1 “яркий” ('luma') // иначе @lightcolor


LESS.functions ●

hue(@color);

// оттенок

saturation(@color); // насыщенность

lightness(@color);

// яркость

red(@color);

// красный канал

green(@color);

// зеленый

blue(@color);

// синий

alpha(@color);

// альфа

luma(@color);

// яркость (перцептивная)


LESS.functions ●

round(1.67); // `2`

ceil(2.4);

// `3`

floor(2.6);

// `2`


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; }


LESS.комментарии ●

/* Можно как в CSS. */ .class { color: black }

// А можно как в с++ .class { color: white }


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

CSS .class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); }


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

CSS .blocked { color: black; }


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

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


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

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


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

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


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

CSS p.foo { border-color: blue; }


SCSS.переменные SCSS $content: "First content";

CSS #main {

$content: "Second content?" ! default;

content: "First content";

$new_content: "First time reference" !default;

new-content: "First time reference"; }

#main { content: $content; new-content: $new_content; }


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


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


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


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

CSS p { color: green; }


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

CSS .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }


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

CSS .puma-icon { background-image: url('/images/puma.png') ; } .sea-slug-icon { background-image: url('/images/seaslug.png'); } .egret-icon { background-image: url('/images/egret.png' ); }


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

CSS .item-6 { width: 12em; }

.item-4 { width: 8em; }

} .item-2 { width: 4em; }


SCSS.вывод :nested #main { color: #fff; background-color: #000; } #main p {

:compact #main { color: #fff; background-color: #000; } #main p { width: 10em; }

width: 10em; }

:expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; }

:compressed #main{color:#fff;backgr ound-color:#000}#main p{width:10em}


SCSS.эллипсис SCSS @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;

CSS .shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

}

-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

.shadows {

box-shadow: 0px 4px, 5px #666, 2px 6px 10px #999;

@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }

}


SCSS.функции SCSS $grid-width: 40px; $gutter-width: 10px;

@function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; }

#sidebar { width: gridwidth(5); }

CSS #sidebar { width: 240px; }


установка


консоль ●

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

Live CSS

http://drupal.org/project/live_css


итоги ●

Перспективно

Несложно научиться

SASS будет в Drupal 8

Не все доступно на shared хостингах


ссылки ●

http://lesscss.org/

sass-lang.com

http://compass-style.org/

http://drupal.org/project/compass

SASS&LESS  

SASS&LESS как альтернатива CSS в связке с Drupal

Advertisement