Quick Guide To CSS Preprocessors

You might believe you now know the web development process, and then the next moment, your colleague is casually going around talking about CSS and its processor. What is CSS? How do they make developers' lives much more accessible?

Now it's time to enter the world of CSS preprocessors, an essential part of any coder's toolbox. In this blog, we'll briefly introduce CSS itself and the coding problems it solves. Next, we'll cover some of their features, pros, and cons.

What is CSS?

CSS stands for cascading style sheets. It offered a high level of writing CSS that extended the essential functionalities. This advanced code is later compiled as regular CSS code. Along with JavaScript and HTML, CSS builds the basis for web pages online. With CSS, you can define the presentation of a web page via color, layout, and text style.

CSS also handles adjustments to different types of devices & screen sizes. Separating CSS from HTML makes it easier to maintain a website. Hence, you can share the style sheet across all the pages or adjust it to various conditions. A CSS preprocessor is a language that extends CSS language and is compiled into regular CSS syntax. A browser can only understand CSS, which may need more to write clean rules. Utilizing CSS, the designer/developer can only reuse a collection of regulations in various selectors with clear pieces of information across a stylesheet. To overcome this limitation, the concept of a preprocessor was created.

What problem does CSS solve?

CSS's primary issue is removing the web page format from the HTML. It's used to describe the structure of a website. Consider it as the pillar of a house—things like the house, whether it is a heading, a list, a link, etc. Over time, tags like font or color attributes got added to HTML. This became a nightmare for web developers.

The style and design must be written from scratch for each page without the shared styles. It makes the development process more expensive.

CSS mainly extracts the style out of the HTML on its own. CSS file. You can change the look of any website with just one file with the help of an external style sheet. CSS saves time and effort by making the style more reusable.

What are CSS preprocessors?

If CSS sounds perfect, why do we not use it regularly? What could turn out badly? There are still a few disadvantages. As the web develops, composing customary plain, CSS can get extensive and monotonous. CSS preprocessors extend the usefulness of standard CSS. They add extra logical syntax and tools like factors if/else statements and loops. It makes the CSS more efficient, robust, and dynamic.

A developer can write a more complex style and layout using a CSS preprocessor. The source code can be limited and readable. CSS preprocessors add syntax, not inside CSS. This advanced code is accumulated as ordinary CSS code.

Popular CSS preprocessors

There are three main CSS preprocessors: SASS, LESS, and Stylus. Most CSS preprocessors have similar features. Each processor has its unique way of completing the task.

There are some differences in advanced usage; let's discuss them in detail.

SASS

SASS stands for Syntactically Awesome Style Sheets. It has mainly two choices for syntax, i.e., Sass and SCSS. Currently, because of version 3.0, SCSS is the official syntax. SCSS is closer to regular CSS, making migrating easier. The significant difference between the two is using parentheses and semicolons. Sass is viable with all versions. It has a large group, has been around for over 15+ years, and has more features than the other CSS preprocessors—additionally, a few supportive structures around Sass, similar to Compass and Bourbon.

LESS

LESS is short for Leaner Style Sheets. It's designed to be as near to regular CSS as expected, as the syntax is the same. Less runs in the browser inside Node JavaScript. With Less, compilation happens via less.js in your browser. It is okay with fast, modern browsers; however, we must be aware of old browsers. As well as, Less.js caches the CSS in the browser, so there is no need to regenerate for the user every single time.

Stylus

The Stylus is built on Node.js. It differs from Sass and Less, which are more opinionated to the syntax; the stylus allows you to omit semicolons, colons, and braces if you want at any time. Another cool feature is that the stylus has a property lookup feature. You can do that easily if you set property X relative to property Y's value. The stylus can be more concise because of its flexibility, but it depends on your preferred syntax.

CSS Preprocessor Features

Let's dive deep into the features CSS preprocessors add to CSS.

Variables

Like in programming languages, CSS preprocessors permit you to add variables to your styles. It is useful for styles you intend to reuse frequently.

For example:

$hoverColor: #33FF9B;
button {
  background-color: $hoverColor;
}

Above, we've defined a hover color variable. Rather than looking up and determining the code every time you required it in your app. You can refer to $hoverColor instead of a variable.

If/Else statements

These statements allow us to apply some CSS if a condition is proper. For example, while checking, the width of the page is more significant than 500 pixels. If it is, we will set the margin at 100px or the margin at the top to 10px.

@if width(body) > 500px {
  margin-top: 100px;
} else {
  margin-top: 10px;
}

Loops

Loops are valuable when you have a collection of items, i.e., arrays or objects you want to increment. For example, suppose we have things of different SM icons and the colors/font we should apply. We want to look as per design prospects and apply the relevant color, and later on, link to each button. We'll look through $social object & assign each color, and link to our controls.

@each $name, $color in $social {
  // selector based on href name
  [href*='#{$name}'] {
    background: $color;

 // apply the link for the relevant image file
 &::before {
      content: URL(https://www.careerfoundry.com/images/#{$name}.png);
    }
  }
}

The popular features include mixins, color functions, extends, etc. It depends on which preprocessor you use, of course!

Pros of using CSS preprocessors

• It makes code more maintainable. You can declare and fix your brand colors in one place. If you want to change brand colors later, you only have to update them in one place.
• These preprocessors make it easy to reuse styles, meaning you don't have to write the same code repeatedly.
• Rather than sprawling sheets of styles, you can group your code and be more specific in CSS. Less repetition is shorter and more readable.
• It's more efficient. It's especially updating it later when the design changes.

Cons of using CSS preprocessors

• Since we're reusing code in CSS, it could take longer to find out the problem.
• Since the browser doesn't read this more advanced version of CSS, it needs to compile it into regular CSS before showing the style.
• The source files will be more concise, but the generated CSS files could be huge. It could cause additional time for a request to complete.

That's it! I hope you are now fully aware of the CSS preprocessor. CSS preprocessors are standard. You'll find them as part of the web development process at many organizations. The best choice often relies on the project and the developers' preferences, and the time the venture was created. It's time to apply any preprocessor in your next project and see what they can do!