Изучаем SCSS
Сегодня, я уже даже представить не могу свою работу без SCSS. Данный препроцессор упрощает сильно работу с стилями и значительно ускоряет процесс разработки в общем.
Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack
Рассмотрим все преимущества работы с SCSS
1. Переменные
Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.
Кстати, в примере сразу виден пример вложенности.
2. Вложенность
Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.
3. Наследование
@extends помогает вам наследовать свойства другого классаю.
4. Миксины
Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими
5. Математические операторы
В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.
6. Циклы
В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.
7. Условия
Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.
Вот так, буквально за три минуты вы окунулись в мир SCSS. Я надеюсь что те, кто его использовали узнали для себя что-то новое, а те, кто не использовали - начнут.
____
#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss
Сегодня, я уже даже представить не могу свою работу без SCSS. Данный препроцессор упрощает сильно работу с стилями и значительно ускоряет процесс разработки в общем.
Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack
Рассмотрим все преимущества работы с SCSS
1. Переменные
Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.
Кстати, в примере сразу виден пример вложенности.
2. Вложенность
Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.
3. Наследование
@extends помогает вам наследовать свойства другого классаю.
4. Миксины
Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими
5. Математические операторы
В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.
6. Циклы
В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.
7. Условия
Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.
Вот так, буквально за три минуты вы окунулись в мир SCSS. Я надеюсь что те, кто его использовали узнали для себя что-то новое, а те, кто не использовали - начнут.
____
#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss