Современный CSS с Sass – практическое руководство.

Благодаря препроцессорам CSS можно писать значительно эффективнее. Что такое эти препроцессоры, какие они есть и почему выбор в этой серии пал на Sass, показывает это видео.

Прежде чем воспользоваться Sass, его нужно установить. И предпосылкой для этого является Ruby. Оба – то есть установка Ruby и Sass – будут показаны в этом видео. Затем вы сможете сразу проверить, действительно ли установка Sass прошла успешно.

Sass-файлы должны быть преобразованы в CSS-файлы, чтобы они могли быть действительно использованы. Благодаря команде Watch вы легко можете выявить изменения в отдельных файлах или в целых каталогах.

С помощью @import можно импортировать и объединять файлы SCSS. Что связано с этим всем при наличии подчеркивания в начале имени файла, является одним из аспектов этого видео.

В Sass есть возможность объявления переменных. Эта концепция, как известно, не доступна в обычном CSS, но в Sass это великолепное средство для эффективной разработки таблиц стилей.

Благодаря использованию вложенности в Sass синтаксис можно существенно упростить, по сравнению с обычным CSS. Вложенность также поможет вам делать код намного более понятным.

Использование @extend позволяет передавать набор CSS-свойств от одного селектора к другому. Также это помогает держать файлы Sass в порядке.

Селектор-заполнитель позволяет определять модули. Эта модуляризация позволяет разделить синтаксис Sass на логические блоки, которые могут быть вставлены в разных местах.

Миксины - это функции, с помощью которых можно значительно упростить, например, рабочие процессы. В этом видео показано, как вы можете определить собственные миксины и в конечном итоге применить их.

С помощью селектора, о котором идет речь в этом видео, вы можете получить доступ к родительскому элементу элемента. Этого селектора, как известно, нет в CSS, и поэтому он представляет собой огромную ценность.

Sass позволяет использовать циклы For. Это работает в Sass весьма просто и может быть использовано, например, для определения собственной сетки.

Помимо For- в Sass также могут использоваться циклы Each и While. Как это можно использовать для автоматизации, показано в этом видео.

На таких языках, как PHP и JavaScript, есть возможность реагировать на различные события с помощью if и else. Такая возможность действительно существует и в Sass. Как это можно использовать, показывает это видео.

Вы можете считать в Sass. Например, это удобно для определения размеров шрифтов. Благодаря соответствующим операторам можно также создать свою собственную систему сеток.

Естественно, в Sass можно определять цвета. Но в этом отношении Sass идет намного дальше, чем обычный CSS. Благодаря соответствующим функциям, например, цвета могут легко манипулироваться.

Фреймворк Compass значительно расширяет возможности Sass. В этом первом видео показано, как вы можете установить и использовать Compass.

Веб-сайт проекта Compass является центральным информационным средством, когда речь идет о работе с этим фреймворком. Я покажу вам, на примере CSS3-функций Compass, как вы можете работать с документацией.

Пример показывает, насколько легко можно реализовать вещи с помощью Compass. В конце этой серии также будет рассмотрен альтернативный фреймворк Sass. Susy предлагает легкую систему сетки.