☝️CSS-препроцессоры
Это надстройки над самим CSS, открывающие новые возможности языка и делающие процесс работы проще и доступнее для разработчика с помощью особых конструкций. Программисты называют их «синтаксическим сахаром».
«Синтаксический сахар» — конструкции, которые не вносят ничего принципиально нового в технологию, но делают работу с ней удобнее, проще и человечнее.
Например, в названиях классов можно использовать разные спецсимволы (кроме, _,), чтобы придать выразительности коду:
<div class="@sidebar $main">
<div class="@sidebar $wrapper">
<div class="@sidebar $text color:red"></div>
</div>
</div>
Такой код будет на 100% валидным, но выглядит ужасно. Зато с помощью препроцессора он станет таким:
.\@sidebar.\$main { ... }
.\@sidebar.\$wrapper { ... }
.\@sidebar.\$wrapper.color\:red { ... }
Что бы там ни говорили, изучить CSS довольно-таки непросто. Чем больше осваиваешь язык и разбираешься в нюансах, тем больше понимаешь, как плохо его знаешь. Поэтому использовать один из двух популярных препроцессоров — удобное решение:
SASS — компилируется с помощью Ruby;
LESS — использует JavaScript или Node.js.
#codepen #css #готовые_решения
👉 @frontend_mind
