Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Benefits of Using CSS Preprocessors Like SASS

DZone's Guide to

Benefits of Using CSS Preprocessors Like SASS

Learn how to create more readable CSS code in your large front-end projects by exploring the benefits of CSS preprocessors.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences.

In web development, it is impossible to implement professional mockups without the use of HTML and CSS. If the markup language allows us to make the template from the required elements, CSS will convert this template to the desired form, as in the original mockup.

It would seem, with the help of pure CSS, you can make the page the way your customer wanted to see it. However, if someone opens your only CSS file and tries to correct something, are you sure that the code will be readable, editable, structured, and understandable? If your project is huge and consists of many parts, are you sure that you can easily support it in the future? If you use a CSS preprocessor, then the answer is yes. Why? Let's find out.

What Is a CSS preprocessor?

In my understanding, this is an add-on to standard CSS that extends the standard features, adds some functions, and allows you to write more readable and easy-to-understand code. At the output, the source code is compiled into familiar CSS.

The use of such a tool in modern development is a “must have” and I advise every web designer or developer to familiarize themselves with it. There are a lot of CSS preprocessors, but we should highlight the most popular ones:

  • SASS

  • LESS

  • Stylus

All of the above preprocessors have almost identical functionality, i.e. there are only small differences in the syntax.

Now, let’s return to the question, what advantages do preprocessors give us, in order to make our code more convenient and supported?

First of all, it is a hierarchy. This feature allows us to structure elements, easily find the parent of the element, quickly write pseudo-classes and pseudo-elements, and even use BEM. For example:

.track
	color: #fff
	&__title
	paddding: 10px
	&:hover, &:focus
	color: blue

Look at this piece of code written in Sass. All this is converted to the following CSS:

.track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}

Laconic, convenient, understandable; the structure from the parent to the child is great, is not it?

The second advantage is the variables. The principle of their work is extremely simple: the name of the variable begins with the symbol $ and then the name itself. After the colon, we write a value – this can be a color, the values of indentation, width, font size, and so on. In the end, we get something like:

$btn-color: blue;
$font-main-size: 16px;

In the general structure it will look like this:

.block {
	font-size: $font-main-size;
}

Just imagine how convenient it is. If you need to change the color of the buttons throughout the site, you just need to make the change in one part of the code!

The third, and biggest thing that CSS-preprocessors can offer us, is the use of mixin. In the usual sense, mixins are functions that can be used several times without repeating the same parts of the code, remember one of the programming principles – DRY (“Do not repeat yourself”).

To be honest, I do not use mixins that often, as there's not much of an urgent need, but I will show some examples. One of the functions I use the most has the following form:

@function em($pixels, $context: $browser-context) {
     @if (unitless($pixels)) {
         $pixels: $pixels * 1px;
    }
     @if (unitless($context)) {
         $context: $context * 1px;
    }
     @return $pixels / $context * 1em;
}

In general, the code will look like this:

body {
	font-size: em(14px);
}

Yes, this is just a conversion of the font size from PX to Em. The following example also saves a lot of time:

@mixin input-placeholder {
     &.placeholder {
         @content;
    }
     &:-moz-placeholder {
         @content;
    }
     &::-moz-placeholder {
         @content;
    }
     &:-ms-input-placeholder {
         @content;
    }
     &::-webkit-input-placeholder {
         @content;
    }
}

The code will look like this:

input, textarea {
     @include input-placeholder {
         color: $grey;
    }
}

There are many examples, however, you should start using mixins yourself to understand how useful this tool is.

Maybe there is one more reason that will make you like CSS preprocessors, and its name is modularity. Right now, we have modularity everywhere – from HTML-templating to various frameworks and project collectors. Preprocessors here also don’t lag behind. You have the ability to include files and organize the styles of your project, as you please. In a separate file, you can store variables, in another media queries, in the third fonts, and so on. Also, preprocessors work very well with other programming languages.

Conclusion

CSS preprocessors are an indispensable thing for every web designer or high-quality developer. All of the above advantages will greatly simplify and speed up the creation of HTML pages, as well as make your code more understandable and structured, not only for yourself but also for colleagues. I hope that after reading this article, you have a better understanding of how to use CSS preprocessors.

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
css ,sass ,web dev ,front-end development ,css preprocessor

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}