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

2. SASS – это метаязык на основе СSS,
предназначенный для увеличения уровня
абстракции CSS кода и упрощения файлов
каскадных таблиц стилей.
Syntactically Awesome Stylesheets - синтаксически
превосходные таблицы стилей

3. SCSS
$blue: #3bbfce;
.content-navigation {
color: $blue;
li {
margin: 0 10px;
}
}
расширение файлов .scss

4. SASS "the intended syntax"
$blue: #3bbfce
.content-navigation
color: $blue
li
margin: 0 10px
расширение файлов .sass

5. Возможности SASS
1. Переменные
2. Вложение
3. Mixins (Примеси)
4. Наследование селекторов

6. Переменные (variables)
$blue: #222fa7;
$pink: #ee3381;
$grey: #ccc;
div {
background-color: $blue;
}
a{
color: $pink;
}
td {
border: 1px solid $grey;
}

7. Вложения (Nesting)
.pane-mailchimp-form {
/***styles***/
}
.pane-mailchimp-form .pane-title {
/***styles***/
}
.pane-mailchimp-form input.form-text {
/***styles***/
}
.pane-mailchimp-form input.form-submit {
/***styles***/}

8. Вложения (Nesting)
.pane-mailchimp-form {
/***styles***/
.pane-title {
/***styles***/
}
input.form-text {
/***styles***/
}
input.form-submit {
/***styles***/}
}

9. Примеси (Mixins)
@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);
}

10. Наследование селекторов (Selector
inheritance)
.error {
border: 1px solid #ff0000;
}
.badError {
@extend .error;
border-width: 3px;
}

12. Кроссбраузерный CSS3
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;
}

13. Кроссбраузерный CSS3
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');
}

14. Хелперы (Helpers)
image-width()
.views-row {
padding-left: image-width('../i/arrow_blue.png');
}

15. Хелперы (Helpers)
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;
}

16. Утилиты (Utilities)
Спрайты (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;

17. Утилиты (Utilities)
Спрайты (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; }

18. Установка SASS + Compass
framework
$ wget --no-check-certificate
https://raw.github.com/joshfng/railsready/m
aster/railsready.sh
$ bash railsready.sh
$ gem install compass

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

20. Установка SASS + Compass
framework
$ compass watch
>>> Change detected at 08:15:12 to: global.scss
overwrite css/global.css

21. Ссылки (sources)
http://sass-lang.com
http://compass-style.org
© Андрей Тюпа @ RedFox