Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

SASS или как организовать стили в проекте

No description
by

Yahor Malkevich

on 22 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of SASS или как организовать стили в проекте

CSS сегодня?
- CSS3, CSS4 ... CSS100500?
- CSS фрэймворки
- Мобльный CSS??

Кто выполняет рутину?
- Препроцессоры
- Постпроцессоры

SASS -
Syntactically Awesome StyleSheets

- Возможности языков программирования
- Универсальная структура файлов
- Независимость блоков от контекста
- Унифицирование
- Модульность
- DRY

Организация структуры файлов
- Декомпазиция
- Cборки и модули
- Настройки

А рабочие инструменты есть???
- Редакторы и IDE
- Браузеры
- Библиотеки примесей и вообще....

SASS
или как организовать
стили в проекте
Новая спецификация
Используй уже сейчас
со скидкой 25%
Ищи статьи! Читай кричи!
CSS3, CSS4 ... CSS100500

Фрэймворки CSS??
Никогда раньше не слышал?
Отсыпте фрэймворков
Мобильники!
VS
Постоянная война нового
со старым ...
и кирпичами
продолжение следует...

SASS, LESS, Stylus
WTF???
Препроцессоры рулят!!!
Компилировать CSS да ладно!?
Вложенные правила
#header
{
background: #FFFFFF;
}
#header .error
{
color: #FF0000;
}
#header a
{
text-decoration: none
}
#header a:hover
{
text-decoration: underline
}

Когда можно
Зачем так писать?
#header
background: #FFFFFF


.error
color: #FF0000


a
text-decoration: none

&:hover
text-decoration: underline
DRY rock!
Переменные


.error
background: #F9F9F9
border: 2px dashed #FUU

.warning
background: #F9F9F9
border: 2px dashed #FUU
В левом углу ринга код без переменных
$bg
: #F9F9F9
$border
: 2px dashed #FUU

.error
background:
$bg
border:
$border

.warning
background:
$bg
border:
$border
В правом углу прокаченный переменными код
Что лучше?
Примеси (Mixins)


.error
background: #F9F9F9
border: 2px dashed #FUU

.warning
background: #F9F9F9
border: 2px dashed #FUU
=
info
background: #F9F9F9
border: 2px dashed #FUU

.error, .warning
+
info
DRY fatality
и это простейший пример
было
стало
Области видимости
$var
: 0
.class1

$var
: 1

.class

$var
: 2

three: $var


$var
: 3

one: $var
Если написать вот так
.class1 .class
{
three: 3;
}
.class1
{
one: 1;
}
то получим...
Прямо программирование на CSS...
1 класс = 1 файл
Знаю что правлю...
Могу быстро найти...
Используем манифесты для подключения и группировки файлов
Я могу менять глобальные переменные для группы
PirateMinds
Старый добрый CSS теснят эти ребята
Почему CSS уже не тот?
CSS сейчас очень крут!!!
Много крутых фич работают кое где.
Элементы и эффекты - массивны!!!
И о УЖАС
-
DRY

тут не работает!!!
Не повторяй снова
Сколько это еще будет продолжаться?
Основные _
base.sass
файлы включаем в
app.sass
файл
app.sass
forms/_base.sass
controls/_base.sass
view/_base.sass
...
SASS модуль??
По аналогии с модулями в языках программирования
file.sass
file.sass
file.sass
...
_base.sass
{название модуля}
Цель модуля
Объединять классы стилизующие один контрол или блок
Так же крассивым решением будет вкладывать в модули в подмодули
!warning
Вот пример моей любимой иерархии
Controls
элементы форм
Forms
стилизация форм
Layout
Стилизация отображения страниц и вспомогательных элементов
Блоки
Например комментарий
Авторизация
Это landing всякие няшеньки во время регистрации и тп
Ошибки
Сами страницы ошибок 404, 500
А так же всяческие уведомления
Давайте типизировать
Глобальные
Локальные
main.sass
1.

@import values
2. @import base
...
{название модуля}
_base.sass
1.

@import values
2. @import base
...
Будь осторожен юный Джедай, можно в локальном конфиге заменить значение глобального конфига
Конфиги - тайны, интриги - расследования
_values.sass
Размеры
Цвета
Примеси
Настройка из
одного места
Чем более детальные настройки можно произвести тем луче!
Легче эксперементировать сразу над всем сайтом
Унификация
Меньше всего надо запоминать,
autocomplete
.class

$my-custom-val: ....
Редакторы и IDE готовы?
ДА капитан!!!
У
Jetbrains IDE
- есть встроенная поддержка
Sublime Text
- c плагинами
Visual Studio
- с плагинами
....
Ваш любимый редактор скорее всего имеет поддержку или встроенную или при помощи плагинов
Иначе запуск компиляции через консоль :(
Очень желательна компиляция "на лету"
Что насчет браузеров?
Код до пред процессора
!=
Коду в браузере
Но если у вас
можете дебажить исходный код
править и видить изменения на лету
ДАЖЕ сохранять изменения
Готовые библиотеки примесей - и вообще...!!!
Fluid сетка
Набор супер полезных миксинов
Набор в виде казино, блэкджека и феничек
А еще есть гисты на гите куда добрые люди выкладываю множество вкусняшек
А потом вы подумаете и напишите свой фрэймворк...
Полезные ссылки
http://sass-lang.com/
http://bourbon.io/
http://neat.bourbon.io/
http://compass-style.org/
Спасибо за внимание
подготовил Егор Малькевич
@wegorelax
Доклад подготовил -
Егор Малькевич
Препроцессоров достаточно?
background:
-moz-
linear-
gradient
background:
-webkit-
linear-
gradient
background:
-o-
linear-gradient
background:
-ms-
linear-gradient
background: linear-gradient
background: linear-gradient
Последеняя спецификация
Проделки браузеров
Постпроцессоры
Ваши задачи
+
Какие бонусы мы можем получить?
Могу добавить общий класс для группы
Могу удалить лишнее без проблем
Общий класс и локальные переменными
Другие параметры
_mixins.sass
Переносите из проекта в проект
Gruntjs +
любой текстовый редактор
https://www.facebook.com/groups/PirateMinds/
Место стилей в наших проектах?
У публичных ресурсов
Для внутреннего использования
Уделяем ли мы внимание стилям?
Стили влияют на наше восприятие ресурса
Эффекты и анимация
"Responsive Design"
Кросбраузерность
Можно и в JS, но зачем?
НЕТ
Пару мыслей о БЭМ
<nav class="
menu menu_footer
">
<h3 class="
menu__head
">Menu</h3>
<ul class="
menu__list
">
<li class="
menu__item
">Item 1</li>
<li class="
menu__item menu__item_state_current
">Item 2</li>
<li class="
menu__item
">Item 3</li>
</ul>
</nav>
............
И обычно у нас свалка стилей в проекте
....
Размер кода в файле
Организованность файлов
Вёрстка независимыми блоками
Милый SASS

не SCSS

RUBY
HAML
COFFEE SCRIPT
SASS
Application
Меньше кода, тот же профит
.checkbox >

$checkbox-height:
14px
input[type='checkbox']
display: none
+ label
height:
$checkbox-height
padding-left:
$checkbox-height
*1.5
background: url('../checkbox.png') no-repeat
background-position: 0(-
$checkbox-height
)
line-height: 1
cursor: pointer


&:checked + label
background-position: 0 0
checkbox.sass
controls/_base.sass
$controls-button-color
: #FUU

@import 'button'
@import 'checkbox'
@import 'input'

.dropdown
@import 'list'
@import 'select'
!warning
controls
base-controls
custom
forms
layout
auth
blocks
errors
Зачем мне эти сложности?
А действительно?
Сайты stack-exchange group
И так более 137 раз...
Такую ситуацию легко контролировать
controls
base-controls
custom
forms
layout
auth
blocks
errors
Core
Sites
site#1
site#2
...
site#137
таже структура файлов манифестов
подключить другую сборку

прекрыть стили
менять переменные
Ситуация с текучкой кадров
Пришел
Ушел
old.style.css
old.style.css
+
new.style.css
Такую ситуацию можно решить
Карты классов || зависимостей
+
Визи ви редактор (снипеты)
Гайды
Full transcript