Pre Processing CSS

Today, there are many technologies and programs in web development, and sometimes it is not clear which of them should be studied and which should not. I have such dilemma with CSS preprocessors. What is a preprocessor? Is it worth studying any preprocessor or not spending time on it? What preprocessor should I use? I have studied all these issues and today I will share with you my opinion and what I have learned from various sources.

What is a CSS preprocessor?

In simple terms, a preprocessor is an add-on to CSS that adds previously unavailable features to style sheets using new syntax constructs and programming logic.

The main task of the preprocessor is to provide convenient syntax constructs for the developer to simplify, reduce the amount of code and thus speed up the development and support of styles in projects, as well as reduce the number of possible errors.

How does it work?

The code is written in a file that has the preprocessor extension. Then it is passed through some Converter, which accepts the preprocessor code as input and the CSS code as output. After conversion, a normal CSS file is obtained. It sounds complicated, but it's not.

Which preprocessor should I use?

At the moment there are preprocessors:

• Less
• Sass (SCSS)
• Stylus

Some people also put PostCSS in this category, but this is a different topic.

You can start with any of them, since they differ slightly from each other.

What is the difference between Sass and SCSS?

In fact, Sass and SCSS are the same thing. The only difference is in the syntax. Sass was originally part of another preprocessor, Haml, which was developed and written by Ruby developers. Therefore, Sass styles used Ruby-like syntax, without parentheses, semicolons, and strict margins. Variables were declared "!" rather than "$", mixins with the assignment symbol " = " rather than ":". This is how Sass looked until version 3.0, when it was replaced with a completely new syntax called SCSS (Sassy CSS). It is as close as possible to the CSS syntax.

Which preprocessor did I choose?

I chose SCSS and didn't regret it, because my code was reduced by 2 times, and the layout became much more interesting and faster. By the way, the study took only 2 evenings! VS code has a Live As Compiler plugin that allows Sass to be compiled in real time.

What are the advantages of preprocessors?

I will demonstrate all the features of preprocessors using CSS as an example

1. Nesting, as in HTML, allows you to improve the readability of the code.
   
   
   
2. Variables. Imagine that you are developing a site that uses several colors and after completing the layout, you are told to change, for example, green to red. When using variables, you only change 1 line, not half of the code where this color occurs.
   
   
   
3. Mixins make it possible to write universal code that can be connected to different projects, rather than writing it again.
   
   
   
4. Imports are also exist in CSS, but not in the way we would like. In preprocessors, all connected files are collected into one file and only one request is made to the server. Dividing a single file with a style into multiple semantic fragments simplifies the code.
   
   
   
5. Functions. There are many built-in functions in Sass (SCSS). The entire list is presented здесь. You can also define your own functions and use them in your projects.
   
   
   
6. Mathematical operations
   
   
   
7. Cycles, conditional constructions. They are rarely used, they are added using the @if and @for directives and perform the same thing as in programming, but they return styles.
   
   
   
   
   
   

In my opinion, preprocessors are a convenient and useful thing that simplifies life. Once you try it, you won't want to go back to normal CSS.

Do you use any CSS preprocessors?

На сегодняшний день в веб-разработке существует много технологий и программ, и порой непонятно какую из них нужно изучать, а какую нет. Такая дилемма у меня возникла с препроцессорами. Что такое препроцессор? Стоит ли изучать какой-либо препроцессор или не тратить на это время? Если изучать препроцессор, то какой? Я изучила все эти вопросы и сегодня поделюсь с вами своим мнением и тем, что я узнала из различных источников.

Что такое CSS-препроцессор?

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

Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, сократить количество кода и тем самым, ускорить разработку и поддержу стилей в проектах, а также уменьшить количество возможных ошибок.

Как это работает?

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

Какой препроцессор использовать?

На данный момент существуют препроцессоры:

• Less
• Sass (SCSS)
• Stylus

Также некоторые выделяют в эту категорию PostCSS, но это отдельная тема.

Начинать можно с любого, поскольку они незначительно отличаются между собой.

В чем различие между Sass и SCSS?

По сути, Sass и SCSS это одно и тоже. Разница заключается только в синтаксисе. Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby. Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов. Переменные объявлялись "!", а не "$", миксины символом присвоения "=", а не ":". Так Sass выглядел до версии 3.0, в которой его заменили совершенно новым синтаксисом под названием SCSS (Sassy CSS). Он максимально приближен к синтаксису CSS.

Какой препроцессор выбрала я?

Я выбрала SCSS и не пожалела, потому что мой код сократился в 2 раза, верстать стало намного интереснее и быстрее. Кстати на изучение ушло всего 2 вечера! На VS code есть плагин Live Sass Compiler, благодаря которому Sass компилируется в режиме реального времени.

В чем преимущества препроцессоров?

Все возможности препроцессоров я буду демонстрировать на примере SCSS

1. Вложенность кода, как в HTML, позволяет улучшить читабельность кода.
   
   
   
2. Переменные. Представьте, что разрабатываете сайт, в котором используется несколько цветов и после завершения верстки вам сказали изменить, к примеру, зеленый на красный. При использовании переменных вы измените лишь 1 строку, а не половину кода, где встречается этот цвет.
   
   
   
3. Миксины или примеси дают возможность писать универсальный код, который можно подключать к разным проектам, а не писать заново.
   
   
   
4. Импорты — существуют и в CSS, но не так, как хотелось бы. В препроцессорах все подключенные файлы собираются в один и делается только один запрос на сервер. Деление одного файла со стилем на множество смысловых фрагментов упрощает код.
   
   
   
5. Функции. В Sass (SCSS) существует множество встроенных функций. Весь список представлен здесь. Также вы можете определить свои функции и использовать в своих проектах.
   
   
   
6. Математические операции
   
   
   
7. Циклы, условные конструкции. Используются достаточно редко, добавляются с помощью директив @if и @for, выполняют то же, что и в программировании, но возвращают стили.

На мой взгляд, препроцессоры - удобная и полезная вещь, упрощающая жизнь. Попробовав хоть раз, вы не захотите возвращаться к обычному CSS.

Используете ли вы какие-либо препроцессоры CSS?