Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Что такое SASS?
SASS (Syntactically Awesome Stylesheets) - это шаблонизатор, предназначенный для упрощения создания CSS-кода, проще говоря, SASS - это такой язык, код которого специальной программой транслируется в обычный CSS код. Браузеры, не понимают этого языка, поэтому для взаимопонимания нужно использовать компилятор. Его задача — привести SASS в понятный классический CSS, который будет распознан любым браузером.
Для чего он нужен?
Со времен разработки стандартов CSS их структура кардинально не менялась, а вот требования к разработке усложнились в несколько раз. И если несколько лет назад с помощью 100 строчек css можно было создать целый сайт, то сейчас этого объема хватит только на шапку сайта.
Также не стоит забывать, что в современных сайтах просто необходимо применять адаптивную верстку, которая тоже увеличивает код стилей в объеме. Таким образом, все, кто сталкивается с объёмным css кодом, задаются вопросом, можно ли его упростить? Именно для этого и был создан препроцессор SASS.
С переходом на него верстка осуществляется быстрее и нагляднее, что не только ускоряет ее процесс, но и создает возможность быстрой корректировки гаммы цветов или начертаний шрифтов в уже сверстанном проекте. Ведь бывает, что заказчику не нравятся, как выглядят цвета его сверстанного сайта на экранах некоторых устройств, и он просит их поменять. Благодаря SASS это не потребует много времени и усилий, нужно всего лишь поменять значения для переменных, задающих цвета.
У языка есть два основных синтаксиса: SASS и более новый SCSS. В SASS-синтаксисе нет фигурных скобок, вложенность элементов в нем реализована при помощи отступов, а стилевые правила обязательно отделены новыми строками. SCSS или Sassy CSS (*SASS-подобный CSS) - максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов.
Синтаксис SCSS:
Синтаксис SASS:
Результат CSS:
Возможности SASS
Переменные в SASS - это способ хранения информации, которая будет использоваться повторно. В переменных можно хранить цвета, стеки шрифтов или любые другие значения CSS.
Вложенности
Sass позволяет вкладывать CSS селекторы также, как и в визуальной иерархии HTML. Больше не придется следить за вложенностью элементов и правильностью наследования классов. Визуально вложенные в Sass внутрь родительского элемента правила будут сохранены с той же иерархией с учетом правил CSS. Но необходимо помнить, что чрезмерное количество вложенностей делает css менее читабельным.
Те куски кода, которые в CSS приходится дублировать, здесь можно сохранить в отдельной переменной и вставлять в нужных местах. Например, там, где требуется использовать большое количество вендорных префиксов для разных браузеров. Компилятор, встретив такую переменную, сохранит вместо нее нужный кусок кода. Для создания миксина используется директиву @mixin+ название этого миксина.
Также дополнения умеют менять код в зависимости от передаваемых им аргументов.
Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать Sass-файл в чистоте, увеличивает скорость верстки и не дает потеряться в куче кода.
Можно создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. CSS получается модульным, что облегчает его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.
В итоге
Если хотите сэкономить время и силы при верстке, рекомендуем Вам присмотреться к этой технологии. Это удобное и простое решение для ускорения разработки сайтов.
Полезные ссылки:
Прямо сейчас консультируем
клиентов
