Is Your Website Safe? How to Perform a Website Security Check
If a website security check isn't on your to-do list, you’re leaving your site (and business) vulnerable. Learn how to…
Read More
As 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.
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; }
.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.
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; }
@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?
Go and try it, I’m sure you’ll love it just as much as we do.
There are currently 8 responses.
July 3, 2014
CSS Preprocesssors are like CSS on steroids. Preprocessors enhances the performance of regular style sheets by making more usuable and manageable.
Here: http://www.cloudways.com/blog/css-preprocessors/
June 23, 2014
LESS is the best!
March 7, 2014
From the article, ‘There are two CSS preprocessed languages – LESS and SASS’.
What about Stylus? Js.
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.
March 15, 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.
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!
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.
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