(HTML5 не обязательно должен иметь адаптивный дизайн.)
Каждая из этих технологий таблиц стилей основана на другой.Все они «компилируются» в CSS.
SASS является важной частью.Изучите основы и начните играть с другими.
html5boilerplate : это таблица стилей, совместимая с различными браузерами.Это отличная отправная точка для CSS.Начиная с 2.0 он использует нормализацию вместо сброса.
CSS : Clarke's 320 & up - прекрасный подход для мобильных браузеров, которые распознаютмедиа-запросы. Skeleton - еще один хороший вариант, если вы используете сеточные системы для макета сайта.Это оба простые базовые файлы CSS, такие как шаблон плюс сетка и медиа-запросы.
SASS : Если вы хотите писать CSS быстрее и с меньшим количеством повторений, вам поможет инструмент абстракции, такой как SASS.Он обрабатывает синтаксис SASS для генерации CSS.Основные моменты включают: переменные, пользовательские функции (миксины), конвертирование существующих файлов .css, .less, .sass, .scss в форматы .sass или .scss.
Компас : Компас представляет собой скорее набор миксинов SASS и включает в себя не "каркас".В конце концов вам не понравится (заново) создавать собственные миксины SASS.Compass уже решил много проблем, и вы можете использовать их решения как миксины и готовые «модули CSS», которые вы можете импортировать.
- Compass использует части html5boilerplate, но он явно не включает все из них.
- Он не нормализует ( normalize.css ), он сбрасывает на основе сброса Мейера.
- Вы должны знать, что вы хотите, а затем перетащите это в Компас.
Susy : Susy - это основанная на процентах сеточная система, написанная на SASS и использующая некоторые функции компаса.
Если я хочу посмотреть, как была решена конкретная проблема, я посмотрю на Компас и выясню, сделали ли они это уже.Я обнаружил, что с Compass есть некоторые издержки, поэтому я не часто его использую.
Я лично использую свою собственную настроенную версию 320 & up , созданную в SASS, где я разбиваю каждую часть на отдельный включаемый файл: цвета, шрифты, формы, сетки, заголовки,ссылки, миксины, modernizr, таблицы, типографика, вендоры, 320, 480, ... и т. д. Он сохраняет все в порядке и организован, и он компилируется в один файл 'syles.css', который затем минимизируется.