The Differences Between CSS, LESS, & SASS
Writing the style sheets for a website is an art. With all of the different ways you can manipulate HTML elements, its important to keep your code as clean as you can to avoid those weird style issues. That's where LESS and SASS come in.
Differences between CSS and LESS & SASS
It's important to know the basic difference between CSS and LESS and SASS. LESS and SASS are pre-processors for CSS code. They let you use variables and some logic in your style sheets. Since you can write actual code inside of your style sheet, your sheets become dynamic which is incredibly useful for responsive design.
With CSS alone, you have to write out the styles you want exactly where you want them. Your CSS files will not update once they are loaded. What you write is what you get. If you want hard code your styles that’s fine. Pre-processors just make it easier to do that.
A pre-processor is just a program that writes CSS for you based on the code you write. By using a pre-processor, you're able to do things like use inheritance selectors and mix-ins. Those aren't options with regular CSS.
Pre-processors make it easier to read through your style sheets and figure out how everything is linked together. That makes it easier to maintain and update you styles without doing a lot of digging to find out why that image is three extra pixels to the right.
SASS is basically the same as LESS except it's used in Rails applications. It stands for Synatactically Awesome Style Sheets. You can install it with these things called gems and I'll let a Ruby/Rails developer tell you all the specifics. The main thing is that it's another CSS pre-processor that makes it easier for you to write CSS.
You still have your mix-ins and variables and all the fancy nesting stuff. Like LESS, SASS is also completely backwards compatible with regular CSS files. It shouldn't take you long to get up and running with either of these pre-processors.
One thing you can't neglect, regardless of with pre-processor you use, is knowing how to write real CSS. When you start looking at pre-processors you should have a certain level of mastery over CSS. You should be able to get your web app looking like the design without using a pre-processor.
You should also know how to architect a CSS file. That'll help you keep you LESS or SASS files easy to read so you aren't jumping through trees like crazy. Nothing is more important than knowing the basics and CSS is about as basic as you get.
Hopefully that made sense of the CSS vs. LESS vs. SASS thing. They're really all doing the same thing. They just do them a little differently. Then there's SCSS which is a spin off thingy from SASS. I've used it in a non-Ruby project before but to be fair it wasn't the greatest project. Anybody else use SCSS outside of Ruby/Rails?
3.4K+ developers have started their personal blogs on Hashnode in the last one month.
Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more