Андрей Тюпа Оптимизация верстки Sass + Compass framework

21
Оптимизация верстки: SASS + Compass framework © Андрей Тюпа @ RedFox

Transcript of Андрей Тюпа Оптимизация верстки Sass + Compass framework

Page 1: Андрей Тюпа Оптимизация верстки Sass + Compass framework

Оптимизация

верстки:

SASS + Compass

framework

© Андрей Тюпа @ RedFox

Page 2: Андрей Тюпа Оптимизация верстки Sass + Compass framework

SASS – это метаязык на основе СSS,

предназначенный для увеличения уровня

абстракции CSS кода и упрощения файлов

каскадных таблиц стилей.

Syntactically Awesome Stylesheets - синтаксически

превосходные таблицы стилей

Page 3: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$blue: #3bbfce;

.content-navigation {

color: $blue;

li {

margin: 0 10px;

}

}

расширение файлов .scss

SCSS

Page 4: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$blue: #3bbfce

.content-navigation

color: $blue

li

margin: 0 10px

расширение файлов .sass

SASS "the intended syntax"

Page 5: Андрей Тюпа Оптимизация верстки Sass + Compass framework

1. Переменные

2. Вложение

3. Mixins (Примеси)

4. Наследование селекторов

Возможности SASS

Page 6: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$blue: #222fa7;

$pink: #ee3381;

$grey: #ccc;

div {

background-color: $blue;

}

a {

color: $pink;

}

td {

border: 1px solid $grey;

}

Переменные (variables)

Page 7: Андрей Тюпа Оптимизация верстки Sass + Compass framework

.pane-mailchimp-form {

/***styles***/

}

.pane-mailchimp-form .pane-title {

/***styles***/

}

.pane-mailchimp-form input.form-text {

/***styles***/

}

.pane-mailchimp-form input.form-submit {

/***styles***/}

Вложения (Nesting)

Page 8: Андрей Тюпа Оптимизация верстки Sass + Compass framework

.pane-mailchimp-form {

/***styles***/

.pane-title {

/***styles***/

}

input.form-text {

/***styles***/

}

input.form-submit {

/***styles***/}

}

Вложения (Nesting)

Page 9: Андрей Тюпа Оптимизация верстки Sass + Compass framework

@mixin pane-main-style {

background: #ff0000;

border: 1px solid #ccc;

margin: 10px;

padding: 5px;

}

.pane-mailchimp-form {

@include pane-main-style;

}

/*****/

.pane-mailchimp-form {

@include border-radius(5px);

}

Примеси (Mixins)

Page 10: Андрей Тюпа Оптимизация верстки Sass + Compass framework

.error {

border: 1px solid #ff0000;

}

.badError {

@extend .error;

border-width: 3px;

}

Наследование селекторов (Selector

inheritance)

Page 11: Андрей Тюпа Оптимизация верстки Sass + Compass framework
Page 12: Андрей Тюпа Оптимизация верстки Sass + Compass framework

SCSS

.simple {

@include border-radius(5px);

}

CSS

.simple {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

Кроссбраузерный CSS3

Page 13: Андрей Тюпа Оптимизация верстки Sass + Compass framework

SCSS @include font-face("Blooming Grove", font-

files("examples/bgrove.ttf", "examples/bgrove.otf"));

CSS @font-face {

font-family: "Blooming Grove";

src: url('/fonts/examples/bgrove.ttf') format('truetype'),

url('/fonts/examples/bgrove.otf') format('opentype');

}

Кроссбраузерный CSS3

Page 14: Андрей Тюпа Оптимизация верстки Sass + Compass framework

image-width()

.views-row {

padding-left: image-width('../i/arrow_blue.png');

}

Хелперы (Helpers)

Page 15: Андрей Тюпа Оптимизация верстки Sass + Compass framework

SCSS ul li {

background: inline-image('../i/arrow_blue.png') no-repeat 0 0;

}

CSS ul li {

background:

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAA

LCAYAAACtWacbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlY

WR5ccllPAAAAG9JREFUeNpiZCjaY8zAwHCWAQ9gAuJVQDwTiJXwKQK

BNCA+A8TlQCyISxEDVLIDqjgNlyIYUIJavxuIjXEpggEXqMJyfIreA3EnCLP

gkFwNVXAPJICuaA8QV6CHG0wRSHAWFGMAFqixs/CFOECAAQAoihR8l

UW5KwAAAABJRU5ErkJggg==') no-repeat 0 0;

}

Хелперы (Helpers)

Page 16: Андрей Тюпа Оптимизация верстки Sass + Compass framework

Спрайты (Sprites)

my-icons/new.png

my-icons/edit.png

my-icons/save.png

my-icons/delete.png

@import "my-icons/*.png";

@include all-my-icons-sprites;

Утилиты (Utilities)

Page 17: Андрей Тюпа Оптимизация верстки Sass + Compass framework

Спрайты (Sprites)

.my-icons-sprite,

.my-icons-delete,

.my-icons-edit,

.my-icons-new,

.my-icons-save {

background: url('/images/my-icons-s34fe0604ab.png') no-

repeat;

}

.my-icons-delete { background-position: 0 0; }

.my-icons-edit { background-position: 0 -32px; }

.my-icons-new { background-position: 0 -64px; }

.my-icons-save { background-position: 0 -96px; }

Утилиты (Utilities)

Page 18: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$ wget --no-check-certificate

https://raw.github.com/joshfng/railsready/m

aster/railsready.sh

$ bash railsready.sh

$ gem install compass

Установка SASS + Compass

framework

Page 19: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$ cp -R css scss

$ compass init

$ nano config.rb http_path = "/"

css_dir = "css"

sass_dir = "scss"

images_dir = "images"

$ cp css/global.css scss/global.scss

Установка SASS + Compass

framework

Page 20: Андрей Тюпа Оптимизация верстки Sass + Compass framework

$ compass watch

>>> Change detected at 08:15:12 to: global.scss

overwrite css/global.css

Установка SASS + Compass

framework

Page 21: Андрей Тюпа Оптимизация верстки Sass + Compass framework

http://sass-lang.com

http://compass-style.org

Ссылки (sources)

© Андрей Тюпа @ RedFox