703.829.0809

Use CSS Preprocessors or Else

CSS preprocessorAs most of you know, CCS is a language used to determine the appearance of HTML pages. Over the past couple of years, CSS preprocessors were introduced to add extensive functionality to CSS that should have been there in the first place. These preprocessors basically supercharge your CSS files.

There are a number of CSS preprocessed languages, two of them are – LESS and SASS. To decide which one you’ll want to use, you should consider your workflow. For example, if you’re using the BOOTSTRAP framework, LESS is the ideal choice since BOOTSTRAP was written in LESS. SASS on the other hand is more ideal if you’re working with Ruby on Rail projects, since SASS was written in Ruby. Ultimately, it really doesn’t matter which one you choose because both languages will help you to become more efficient.

CSS preprocessors make your lives easier by eliminating repeating styles and by making it less tedious to code.

For example, how many times have you found yourself doing this:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}

Here’s the same code written in LESS:

.header-styles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #333;
}
h1 {
	.header-styles;
}
h2 {
	.header-styles;
	font-size: 24px;
}
h3 {
	.header-styles;
	font-size: 18px;
}

As you can see, we wrote less code to achieve the same results. We declared a class which holds all the global styles, and then within each of the headers we called the class and changed only what we needed to change. If you compare the two, the one written in LESS is more organized and easier to read.

To take the power of preprocessors a step further, let’s look at another example:

In this example, let’s take a look at variables.

.button {
	color: #fff;
        background: #B41F24;
}
.link {
	color: #B41F24;
}
.sidebar {
	padding: 1em;
	border: 5px solid #B41F24;
}

Now, let’s write this in LESS:

@theme-color: #B41F24;

.button {
	color: #fff;
	background: @theme-color;
}
.link {
	color: @theme-color;
}
.sidebar {
	padding: 1em;
	border: 5px solid @theme-color;
}

So let’s consider you had to update the theme color to a different color, with variables, you can now make those color updates much quicker.

In addition, CSS preprocessors have other features such as mixins, math operators, nesting, and functions that you can use together; thus, making your site easier to maintain.
So what are you waiting for?

CSS preprocessors…

  1. Make your code easier to maintain
  2. Keep your code more organized
  3. Are easy to set up
  4. Save you time
  5. And ultimately will make your sites better and easier to maintain

Go and try it, I’m sure you’ll love it just as much as we do.


Related Posts


Comments

There are currenty 8 responses.

Matthew McKey
March 7, 2014

From the article, ‘There are two CSS preprocessed languages – LESS and SASS’.

What about Stylus? Js.

Reply
    Vee Lee
    March 8, 2014

    Hey Matthew, Stylus is also one of the great CSS Preprocessor out there. They’re all great and were created to achieve the same goal. Which one to use? That’s a question only you can decide, what would you prefer and would it work for you?

    For me, I prefer LESS because it’s what I started out with and it works for me. They all have great support and features that’ll help you to be more efficient. Try them out! and then decide.

    Reply
      Matthew McKey
      March 14, 2014

      I started with and still primarily use SCSS, although I am thinking about picking up SASS as I prefer not needing to use curly braces if I can get away with it. Just a littttttle DRYer.

      Although I can’t deny the free-form nature of Stylus has a certain allure to it.

      Reply
Nathan Friend
February 11, 2014

What first attracted me to LESS was the following very simple feature:

In standard CSS if I want to target an element that is contained within another specific element, such as all links within a div with the class foo assigned to it. I would have to do the following:

.foo a{
color: #fff;
}

That seems simple enough, but if I want to target multiple elements under that same div. In CSS I would have to do this for every element I want to target:

.foo a{
color: #fff;
}
.foo h1{
font-size: 22px;
}
.foo h2{
font-size: 18px;
}

With LESS I can do the following and keep things much cleaner.

.foo{
a{
color: #fff;
}
h1{
font-size: 22px;
}
h2{
}
font-size: 18px;
}

That is my two cents!

Reply
Michael
February 11, 2014

Your example of the old CSS way is a bad case to make. You could have written the common styles between all headers like so:

h1,h2,h3 { /* common styles here */ }

The only difference between each is the font size.

I like SCSS and such, but your example is not very good. In terms of code amount between them, the old CSS way would win.

Reply
    Vee Lee
    February 11, 2014

    Hey Michael, Thanks for the feedback! I do agree with you, my example might not have been the best example, its to give an idea of what you can achieve with CSS preprocessors. I’ve put up another example, using variables, please take a look and let me know your feedback.

    Thanks,
    Vee

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Request A Quote
Let's take your business to the next level. Fill out the form below to get started!