SASS&LESS

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

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.