SASS: CSS нового уровня?

С помощью CSS вы можете оформить свой сайт именно так, как вам хочется. Но язык таблиц стилей имеет свои ограничения. Многие веб-дизайнеры хотели бы иметь более удобный способ работы над дизайном сайта. Именно здесь на помощь приходят препроцессоры CSS. С помощью языка таблиц стилей, который является расширением базового CSS, работа над дизайном может быть значительно облегчена. Наиболее известным из таких языков расширения является SASS. Что именно представляет собой «Синтаксически удивительная таблица стилей»?

Чтобы понять, что такое SASS и зачем вам может понадобиться этот язык, необходимо сначала разобраться с CSS. Веб-сайты изначально основаны на языке разметки HTML. Если вы хотите создавать дизайн на HTML, то вам придется связывать содержимое непосредственно с дизайном — на каждой отдельной HTML-странице. Проще говоря, HTML не предназначен для дизайна и поэтому сильно ограничен в этой области. Каскадные таблицы стилей (CSS) задают представление HTML-страниц. CSS располагается поверх HTML-кода, как шаблон, и определяет дизайн каждого элемента на странице: Шрифт, цвет шрифта, фон — веб-дизайнеры могут задать все эти элементы оформления с помощью CSS.

Например, чтобы установить все заголовки шрифтом Calibri 22pt, задайте это в таблице стилей, где указаны все правила оформления вашего сайта. Эти правила обычно находятся в отдельном файле, на который затем ссылаются HTML-страницы. Это значительно сокращает объем информации на странице.

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

Все современные браузеры могут отображать CSS без ошибок, но это не обязательно относится к SASS (который используется уже более 10 лет) или другим расширенным языкам таблиц стилей. По этой причине SASS считается препроцессором. Код в документе SASS сначала преобразуется в CSS, прежде чем исходный код, то есть веб-сайт, попадает в систему.

Сначала кажется, что нет никаких причин, по которым SASS необходим. В конце концов, CSS уже несколько десятилетий позволяет разрабатывать привлекательно оформленные и техничные страницы. Даже если вы хотите работать с SASS и дальше, вы не можете обойтись без CSS. Старомодный язык таблиц стилей останется в будущем как основа представления информации. SASS и другие языки просто опираются на скелет CSS.

Конечно, с SASS у вас есть некоторые возможности, которых нет только в CSS:

• Переменные: С помощью SASS вы можете сохранять информацию в переменных, чтобы использовать ее позже. Например, можно централизованно хранить значение цвета в более понятной переменной.
• Математические функции: В SASS вы также можете использовать математические операции, такие как +, -, *, / или %. Это позволяет, например, влиять на размерные характеристики.
• Функции: Другие функции также облегчают работу над дизайном. Они позволяют, в частности, изменять значения цветов или анализировать списки.
• Циклы: Еще одним преимуществом SASS является возможность создания циклов. Они повторяются до тех пор, пока не достигнут определенного вами состояния.
• Различение случаев: Они имеют схожую функцию с условными инструкциями «if» и «else». Данные команды выполняются только при соблюдении определенных условий.
• Миксины: Миксины, проще говоря, это шаблоны. Вы можете либо создать их самостоятельно, либо просто интегрировать в свой код при использовании фреймворка.
• Отступы: Оригинальный SASS (в отличие от SCSS) работает с отступами и переносами строк для структурирования кода. Вам не нужны скобки для отображения вложенности или точки с запятой для обозначения концов строк.
• Вложенность: CSS не позволяет работать с вложенностью в коде. Однако SASS предоставляет пользователям возможность визуального отображения зависимостей для сокращения избыточности и упрощения процесса написания.
• Наследование: Можно наследовать свойства от одного селектора к другому. Это экономит некоторые усилия по написанию и делает код более компактным.
• Частичные файлы: Для интеграции элементов кода в файл SASS можно использовать частичные файлы. Это файлы, которые должны содержать всего несколько строк CSS и импортируются в файл SASS по команде.

Для SASS уже существуют полезные фреймворки и библиотеки. Compass или Bourbon сделают за вас большую часть работы при создании сайта.

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

Эта команда компилирует исходный код из созданного вами файла example.sass в новый файл CSS. При этом синтаксис SASS автоматически изменяется в соответствии с правилами CSS. Например, отменяется наследование и корректируется синтаксис.

Работа над веб-сайтом редко бывает закончена, и вы потенциально можете регулярно вносить изменения в дизайн. Поэтому SASS использует параметр «—watch», чтобы дать вам возможность отслеживать папки или файлы. Если вы вносите в них изменения, то система автоматически перекомпилирует их.

Существует не один синтаксис, в котором вы можете использовать SASS, а два: Один имеет оригинальную форму, которую обычно называют «синтаксис с отступами» или просто «SASS» для краткости. Но есть и новый вариант, который более сильно ориентирован на стандарты CSS и поэтому называется sassy CSS (SCSS) — так, SASS-style CSS. Версия 3 SASS имеет SCSS в качестве официального синтаксиса. Самое большое отличие: использование круглых скобок и точек с запятой.

Оригинальный синтаксис SASS работает с отступами и переносами строк — процесс, адаптированный из YAML. Чтобы закончить строку кода, достаточно вставить перевод строки — для этого нужно нажать клавишу Enter. Отступы выполняются просто с помощью кнопки табуляции. Группы, называемые блоками декларации, формируются путем изменения позиции в шрифте. Это невозможно с помощью самого CSS. Здесь приходится использовать круглые скобки для группировок и точки с запятой для деклараций свойств. Это именно то, что необходимо для SCSS.

Вариации вызывают яростную преданность: Некоторые пользователи клянутся простотой оригинального SASS, где не нужно обращать внимание на правильное расположение круглых скобок при перемещении фрагментов исходного кода и вообще можно создавать более тонкий и чистый код. В итоге вы получаете меньше символов и строк в результате «синтаксиса с отступами». Энтузиасты SCSS, с другой стороны, с радостью принимают дополнительные усилия, потому что это больше похоже на то, что вы уже знаете из использования CSS.

SCSS является надмножеством CSS, что гарантирует, что код CSS фундаментально работает и в SCSS — но не наоборот. Тем не менее, функции SASS по-прежнему полностью содержатся в нем. Это облегчает одновременную работу с обоими языками. Кроме того, людям, уже работающим с CSS и знакомым с синтаксисом, гораздо проще перейти на новый язык. Несмотря на то, что SASS поддерживает оба синтаксиса, вам все равно придется решать для каждого проекта: чтобы иметь возможность различать разные форматы, присваивайте файлам окончание «.sass» или «.scss».

SASS приносит много преимуществ, но препроцессор все еще не убеждает всех. Преимущества очевидны: язык препроцессора дает пользователям больше возможностей при создании кода. Многим веб-дизайнерам, например, нравится функция, позволяющая хранить цвета в виде переменных вместо того, чтобы постоянно вводить значение цвета в виде шестнадцатеричного числа. Миксины, переменные, наследование и вложенность лучше, чем традиционный CSS, обеспечивают соблюдение принципа «Не повторяйся». Эта теория подталкивает к тому, чтобы избегать повторений в коде и сохранять исходный код более компактным. Эти изменения также значительно снижают трудозатраты. Вместо того чтобы вносить изменения в нескольких разных местах, вы можете сделать одно изменение в центральной позиции.

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

Перед использованием SASS — как и перед использованием любой другой незнакомой технологии — необходимо потратить время на изучение нового языка. В дополнение к CSS, который вы в любом случае должны знать, это еще один язык, который нужно освоить.

В дополнение к SASS, LESS также зарекомендовал себя в кругах разработчиков. Этот язык таблиц стилей сильно ориентирован на CSS и по своему синтаксису напоминает SCSS. Оба препроцессора обладают некоторыми общими свойствами: И SASS, и LESS позволяют использовать миксины и переменные. Однако есть одно отличие: SASS основан на Ruby, а LESS использует JavaScript. Но даже это не дает ни одному из препроцессоров преимущества перед другими.

Настоящие различия находятся в логических функциях: LESS дает пользователям возможность активировать миксины только в определенных ситуациях. Это полезная функция, но она представляет собой предел логических связей в LESS. SASS, с другой стороны, предлагает циклы и различение регистров, как это известно из языков программирования.

В SASS пользователи вольны выбирать между «синтаксисом с отступами» и SCSS. Каждый разработчик может решить для себя, хочет ли он отойти от правил CSS или остаться ближе к оригиналу. LESS не предлагает такого выбора. Здесь пользователям приходится придерживаться старых правил. Код в LESS автоматически является супермножеством CSS: Весь исходный текст, сформулированный в CSS, также функционирует в LESS — точно так же, как и в SCSS.

SASS гораздо более популярен среди веб-дизайнеров. Но это может быть связано с тем, что SASS немного старше. Изначально LESS поддерживался известным фронтенд-фреймворком Bootstrap, который полагался на более молодой препроцессор. Но с версии 4 проект официально перешел на SASS, что еще больше повысило популярность синтаксически потрясающих таблиц стилей.