CSS has evolved a lot since it came out. Some features like Flexbox or Grid added possibilities that once seemed unthinkable, but even with the language growing and evolving daily, there are still some annoying things we have to deal with everyday, especially its repetitiveness. To overcome this and other issues, methodologies and preprocessors were created. The first helps us organize our styles in a way that promotes reusability, consistent naming, and low specificity; the second provides the tools we need to write clean, reusable, and maintainable syntax by allowing developers to write code in one language and then compile it into CSS. This expands our possibilities with features like functions, mixins or directives. Some examples of CSS preprocessors include Sass, Less and Stylus

One of the most popular preprocessors is Sass, which is our main topic this week, so let's get started.

First, If you don't have Sass installed, you can go to its official site and check the documentation, there're also packages for sublime text like SassBuilder. Once installed, we can start enjoying its features; let's get through some of them and see how they can drastically improve our workflow.

It’s easier to see how the tool works with a real life scenario, so the first thing we're going to do is create a .scss file inside a folder called assets; I'm calling mine application.scss. There are two ways you can work with sass: using extension .sass or .scss. When sass came out it was a little different; it was inspired by Haml, which means it has a Ruby-like syntax. There were no curly braces; instead the code blocks were defined by indentation, among other differences — something similar to stylus.

Beginning in 2010, the developers took a different approach. They wanted to fully support css and introduced a new extension called scss (for sassy css); you can use either extension, according to your taste, but I recommend using scss for a few reasons.

First, because as I already mentioned, scss is fully compatible with css, which means the syntax is already known: after all, it’s just CSS with extras. This is important when working with inexperienced developers: they will be able to quickly start coding without knowing the first thing about Sass. Second, most existing tools, plugins, and demos for sass are developed using the scss syntax.

Let's get back to our example and build a simple banner using css; then we'll migrate that code to scss and see the differences. First, we do our HTML markup:

`html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="assets/normalize.css"> <link rel="stylesheet" href="assets/application.css"> <title>Sass Features</title> </head> <body> <div class="banner-wrapper"> <h1 class="main-title">Welcome to our site</h1> <div class="buttons-container"> <div class="default-button -main">Sign in</div> <div class="default-button -danger">Sign up</div> </div> </div> </body> </html> Pretty straightforward: we use normalize to have our base style standardized, and of course, we link our application.css file. Then we add a banner container, the title, and a couple of buttons. I’m using livereload to see changes in real time and sass globbin which allows us to import many sass or scss files in a single import statement, necessary requirement to manage global files if you’re on windows. Now we can open our terminal and go to our project folder and execute this command to render our css file, for now there’s nothing, so let’s style. css .banner-wrapper { align-content: center; align-items: center; background-color: #813772; display: flex; flex-wrap: wrap; height: 100vh; justify-content: center; width: 100%; } .banner-wrapper > .buttons-container { align-items: center; display: flex; justify-content: center; width: 100%; } .main-title { color: white; font-family: helvetica, arial, sans-serif; font-size: 3rem; font-weight: bold; margin-bottom: 1rem; text-align: center; text-shadow: .1rem .05rem 0 black; width: 100%; } .default-button { background-color: #F5F5F5; border-radius: .5rem; color: darkgray; cursor: pointer; font-family: helvetica, arial, sans-serif; font-size: 1.25rem; font-weight: bold; margin: 0 .5rem; width: 15rem; padding: .5rem; text-align: center; text-shadow: .1rem .05rem 0 black; transition: all .25s; } .default-button:hover { background: gray; color: white; } .default-button.-main { background-color: #062F4F; color: white; } .default-button.-main:hover { background-color: #04243D; } .default-button.-danger { background-color: #B82601; color: white; } .default-button.-danger:hover { background-color: #8c1d01; } We use Flexbox in the containers, along with its properties align-content/align-items and justify-content to center the elements. The title and the buttons simply have some common definitions (like background-color, color, or font) along with hover effect. See how repetitive this is?