×
Заказать звонок
×
Заказать услугу
×
Заказать услугу
Мы в соц сетях -
Личный кабинет
/ /
SASS. Быстрая верстка - мгновенный эффект

SASS. Быстрая верстка - мгновенный эффект

17.08.2017

Что такое SASS?

SASS (Syntactically Awesome Stylesheets)  - это шаблонизатор, предназначенный для упрощения создания CSS-кода, проще говоря, SASS - это такой язык, код которого специальной программой транслируется в обычный CSS код. Браузеры, не понимают этого языка, поэтому для взаимопонимания нужно использовать компилятор. Его задача — привести SASS в понятный классический CSS, который будет распознан любым браузером.

Для чего он нужен?

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

Также не стоит забывать, что в современных сайтах просто необходимо применять адаптивную верстку, которая тоже увеличивает код стилей в объеме. Таким образом, все, кто сталкивается с объёмным css кодом, задаются вопросом, можно ли его упростить? Именно для этого и был создан препроцессор SASS.

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

Что такое SCSS?

У языка есть два основных синтаксиса: SASS и более новый SCSS. В SASS-синтаксисе нет фигурных скобок, вложенность элементов в нем реализована при помощи отступов, а стилевые правила обязательно отделены новыми строками. SCSS или Sassy CSS (*SASS-подобный CSS) - максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов.

Синтаксис SCSS:

сас1.png

Синтаксис SASS:

сас2.png

Результат CSS:

сас3.png

Возможности 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.

В итоге

Если хотите сэкономить время и силы при верстке, рекомендуем Вам присмотреться к этой технологии. Это удобное и простое решение для ускорения разработки сайтов.

Полезные ссылки:




Понравилась статья? Подписывайтесь и читайте новые интересные статьи!

Поделиться в соцсетях:

Возврат к списку

×
Хочу скидку!
Вверх