Sass — еще более удобный и логичный CSS
Несколько раз при написании CSS кода я ловил себя на мысли, что было бы круто, если бы в CSS можно было использовать что-то вроде переменных и функций — это бы избавило от необходимости повторять участки кода и сильно ускорило бы работу. Увы, такого в CSS делать нельзя.
Недавно Саша спросил меня: «Ты знаком с Sass?». Оказалось, что это специальный язык написания стилей, но более удобный и предоставляющий массу новых возможностей, которых нет в привычном CSS.
Что такое Sass
Авторы называют его мета-языком описания стилей. Синтаксис построен на стандартном синтаксисе CSS, с той лишь разницей, что Sass более простой, логический и удобный язык. Его авторами и разработчиками являются Хамптон Катлин и Натан Вайценбаум.
В чем прелесть
Sass предоставлять вам больше возможностей и свободы при написании CSS. Это как программный язык внутри CSS. Вы можете использовать что-то вроде функций с переменными, логически структурировать ваш код (сложенность стилей и классов). Вот главные возможности Sass с примерами:
Красота кода
В Sass нет точек с запятой и фигурных скобок, свойства располагаются непосредственно после селектора и по одному на строке.
Вложенность
Теперь для вложенных селекторов не нужно повторять селекторы родителей, достаточно просто расположить дочерний селектор внутри родительского. Это применимо и для свойств.
Переменные
Если какое-то значение свойства повторяется у многих элементов — занесите его в переменную и используйте сколько угодно раз. При изменении значения необходимо будет поменять его только в одно месте. Математические операции с численными значениями так же возможны (пропорции шрифтов скажем).
Миксины
Что-то вроде функций, которые могут содержать целые куски CSS кода вместе с селекторами и свойствами. Зачем писать одно и то же по сто раз?
Как это работает
Изначально есть файлы, в которых вы пишете на Sass. Как вы догадываетесь, браузер не понимает (по крайней мере пока) такой язык, так как он не является стандартизированным. Браузер понимает только CSS и следовательно ему нужно отдать ваши стили в формате CSS. Как это сделать? Да взять и скомпилировать. Но для этого вам понадобиться специальный фреймворк на том языке, на котором у вас написаны серверные приложения (ASP.NET, Ruby, PHP).
Лучше всего с Sass работает Ruby, для которого на официальном сайте есть инструкция по установке и работе со специальным дополнением. Для того, чтобы компилировать Sass с помощью PHP вам понадобиться другой фреймворк — Compass.
Примеры работы
Большинство из вас наверняка захотят попробовать что-то написать на этом языке перед тем, как решить использовать его в своих проектах или нет. Для этого есть специальная страничка, где вы можете написать код на Sass и посмотреть, как он будет выглядеть в CSS.
Вывод
На первый взгляд Sass довольно сильная вещь. Из того, что я узнал и увидел, можно сделать вывод, что будущее у этой технологии есть. Более легкий синтаксис, логическая структура и возможность использования переменных предоставляют разработчикам отличные возможности и могут существенно ускорить написание и редактирование файлов стилей.
Я очень хочу услышать ваши мнения и мысли по поводу этой технологии — что нравится, а что нет и что из возможностей вы бы с радостью использовали.
Рекомендуем почитать
