Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Getting Started With CSS Preprocessors

July 1, 2014

3 Min Read
Reading Time: 3 minutes

There is a buzz around CSS preprocessors—for e.g. Less, Sass, and Stylus—these days. I started using CSS preprocessors a couple of years ago. These preprocessors are used to add functionality to your original cascade style sheet (CSS) files.

css-preprocessors-banner

Being a designer and developer, the idea intrigued me because of its programmable nature of using supercharged style sheets (CSS files) that could contain variables, functions, nested rulesinline imports, and more—all with a fully CSS-compatible syntax. After the development, these special files would then get compiled into regular CSS files that all web browsers could render without any issues.

Why should you use it anyway?

Before implementing or using anything new, we first think—or at least I do—why should it be used?

Let’s face the fact: CSS definitely is a tedious and hideous thing to code (at least from a developer’s perspective) because you got to write infinite lines of code frequently to get your desired program functioning. This eventually makes your code a little dirty.

As compared to CSS, the CSS preprocessor has no such limitations.

One of the biggest advantages of CSS preprocessors is that it removes code redundancy. In the field “variables”, you can define a global value for any property which you can use anywhere in the code (obviously with respective property) without redefining its value and if you want to change the value  of the “variable”, it will automatically change where ever it is called.

So without further ado, let’s dive into some of the basic, yet awesome features that will entice you to consider using a CSS preprocessor:

Variable

This feature alone is enough for me to give CSS preprocessors a try.

As I have explained above, “variable” gives us the liberty to change the value of a property over the time. It is more manageable rather than changing the many instances of its value spread over a CSS file.

Variables begin with dollar signs, and are set as CSS properties.

/* -- .scss -- */
/*Page text color i.e p, b, a, i, span etc*/
$color: #efefef;
p, b, a, i, span {color: $color;}
p.chc{ color: $color;}

/* -- resulting css -- */
p, b, a, i, span {color: #efefef;}
p.chc{ color: #efefef;}

Operations

They come in handy, especially as we are moving toward web design and development-based flexible layout over fixed dimensions.

/* -- .scss -- */
$navbar-width: 1000px;
$items: 5;
#nav-wrapper li {width: $navbar-width/$items - 50px;}

/* -- resulting css -- */
#nav-wrapper li {width: 150px}

Mixins

They are similar to functions and help us to define styles that can be re-used throughout the style sheet without needing to re-write.

/* -- .scss -- */
/*Define a mixin*/
@mixin text-max
{
   font: {
      family: Arial;
      size: 20px;
      weight: bold;
   }
   color: $color; /* $color is a variable defined earlier */
}
/*Using a mixin*/
.main-headings
{
   @include text-max;
   padding: 4px;
   margin-top: 10px;
}

/* -- resulting css -- */
.main-headings
{
   font: {
      family: Arial;
      size: 20px;
      weight: bold;
   }
   color: #efefef;
   padding: 4px;
   margin-top: 10px;
}

They can even take parameters/arguments and work accordingly.

/* -- .scss -- */
/*Define a mixin*/
@border-radius($value)
{
   border-radius: $value;
}
/*Using a mixin*/
.curved-headings
{
   @include @border-radius(5px);
}

/* -- resulting css -- */
.curved-headings
{
   border-radius: 5px;
}

Nested Rules

It allows CSS rules to be nested within one another. The inner rule only applies within the parent rule’s selector.

/* -- .scss -- */
#main_Wrapper div#inner_wrapper p
{
   color: $color;  /* $color is a variable defined earlier */
   width: $width; /* $width is a variable defined earlier */
   .redbox
   {
      background-color: $bk-color; 
           /* $bk-color is a variable defined earlier */
      color: $color;  /* $color is a variable defined earlier */
   }
}

/* -- resulting css -- */
#main_Wrapper div#inner_wrapper p
{
   color: #efefef;
   width: 97%;
}
#main_Wrapper div#inner_wrapper p .redbox
{
      background-color: #3d3d3d;
      color: #efefef;

}

Preprocessors have made CSS very exciting. If you have more examples of using CSS preprocessors in your projects, tell me about it in the comments section.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Rameez Jawaid

Rameez Jawaid worked as UX Developer for Cloudways. He is an expert on many web technologies like PHP, CSS, Ajax, JQuery, etc.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!