LESS, SASS и Stylus. Различия

С течением времени, когда многие сайты начали становиться все больше и сложнее, веб-мастера стали приходить к выводу, что CSS больше не является хорошим способом решения вопросов внешнего вида интернет-страниц. Длинные нагромождения кода стали головной болью для многих, особенно в случае если над одним сайтом работало несколько человек. Решение было очевидно: язык стилей нужно срочно укорачивать и упрощать. Таким образом, постепенно появился ряд препроцессоров CSS, такие, как SASS, LESS, а затем и Stylus.

Сначала был сделан SASS, который позволял проще работать с вложенными селекторами, а также добавлять в код константы и примеси, что давало возможность сэкономить кучу времени.

Например, вместо того, чтобы прописывать множеству селекторов новый цвет (если старый по каким-то причинам больше не устраивает) или присваивать html-элементам новые классы, можно просто прописывать на месте цветового кода какую-либо константу (к примеру, color: $linkColor), которой потом изменять значение сколько угодно раз ($linkColor: #FFF). Еще один плюс заключается в отсутствии обязательных фигурных скобок и точек с запятой, пропустив одну из которых в таблице стилей CSS, можно потом долго искать ошибку. Конечно, все это — лишь малая часть плюсов метаязыка SASS.

Но спустя немалое количество времени, был придуман LESS, синтаксис которого больше похож на CSS. Этот препроцессор также включает в себя скобки и точки с запятой и некоторые общие с каскадной таблицей стилей правила, но при этом дает возможность объединять некоторые селекторы, вложить «дочерний» в «родительский», значительно укорачивая длинный текст. Еще он тоже включает в себя константы и примеси, к тому же позволяет использовать операторы и функции. Многие пользователям это понравилось, и они стали активно работать с новым метаязыком. Несколько позже был создан SCSS (Sassy CSS), в котором помимо других положительных качеств появилась также хорошая совместимость с CSS. Эти два кода можно совмещать в одном файле с определенным расширением (.scss). Синтаксис довольно схож, поэтому новичкам, освоившим азы сайтостроения, легко перейти на новый метаязык с дополнительными возможностями.

Далее появился Stylus, синтаксис которого еще больше приблизился к минимализму, кроме того он имеет свойства языка Java Script. Пользователь Stylus может оперировать с функциями, переменными, циклами, условиями и др. Это гибкий и лаконичный препроцессор, позволяющий проделывать с внешним видом сайта множество вещей, минимизируя, при этом, количество возможных ошибок.