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. Without any assistance, you should be able to get your web app looking 85%-90% correct 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?
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding