Кто может поделиться версткой сайта с помощью sass?

Question

[HamSter]

Возможно кто-то знает или может показать свой проект с версткой с использование sass?
Интересует все, в особенности пишите ли вы миксины для box-shadow или flex. Я знаю, что есть встроенные, но в compass, а как только силами sass.
Возможно есть что почитать, посоветуйте, пожалуйста.

Answer 1

[Евгений]

В своих проектах использую следующую структуру папок для sass:
- sass
-- blocks (Какие-то отдельные блоки по типу input, button, form, popup)
-- core (Базовые стили которые я таскаю из проекта в проект)
--- base.sass (Базовые стили, sass-плейсхолдеры)
--- animation.sass (Анимации)
--- settings.sass (Настройки проекта, цветовые схемы, шрифты, размеры экранов)
--- media.sass (Миксины для медиа запросов)
--- type.sass (Типографика)
-- layouts (Лейауты страниц типа header, footer)
-- pages (Стили для различных страниц)
-- plugins (Сюда помещаю css файлы плагинов с расширением .scss)
По поводу миксинов типа box-shadow, flex не использу, т.к. после компиляции sass -> css обрабатываю автопрефиксером и на выходе получаю все вендорные префиксы для flex
Если интересно, могу скинуть в скайпе проект
skype: lithium100500

Comments

[copal]

По поводу миксинов типа box-shadow, flex не использу, т.к. после компиляции sass -> css обрабатываю автопрефиксером и на выходе получаю все вендорные префиксы для flex

Ну это вообще к делу не относится... Миксины созданы прежде всего не для фраймворков которые имют их, а для упрощения жизни разработчика. Вот нужно Вам в десяти тестах применить одну и туже тень, то чтобы не писать каждый раз тень, создаете миксин @mixin lite-grey-shadow(). Это самый минимум.

[Евгений]

Подобное можно хранить в настройках и так же применять box-shadow: $shadow. Но это уже на вкус и цвет, можно создавать миксины и для шорт катов: box-shadow -> +bs(...), но опять же это кому как удобнее.

Answer 2

[Максим Гатилин]

Статьи на эту тему и не только можно найти на блоге glivera-team.

Answer 3

[maolo]

Интересует все, в особенности пишите ли вы миксины для box-shadow или flex. Я знаю, что есть встроенные, но в compass, а как только силами sass.

Есть autoprefixer, так что Compass, по большому счету, и не нужен.
Так что привыкаем снова писать правила в соответствии со стандартами CSS :) Более того, компас похоже умер - уже очень давно не обновлялся.

Еще стоит уйти с ruby версии на node-sass - скорость компиляции Вас приятно удивит.