Sass CSS – This Awesome Extension Will Make You Sassy
Tags: howto, differencebetweens, generatecssfiles, minifycssfiles
Published: 2018-12-12 07:49:10

---
title: Sass CSS – This Awesome Extension Will Make You Sassy
published: true
tags: How To,difference between s,generate css files,minify css files
canonical_url: https://dirkstrauss.com/sass-css-sassy-websites/
---

Sass CSS – If you develop web applications and you have [not heard about Sass](https://sass-lang.com/), then today is your lucky day. To quote a note from the Sass website, it is the most mature, stable and powerful professional grade CSS extension language in the world.

## Sass CSS

If you have ever had to work with CSS, you will love Sass. It is a feature rich CSS extension language. Sass CSS is also completely compatible with all CSS versions. It has actively been supported for many years and it is safe to say that it is widely adopted. What Sass will do is enable you to write CSS using Sass and have it compile into CSS when you save. You can also create a minified CSS file.

### Looking for something else? Try these links instead:

- [Cool Life Hacks using Simple Technology Hacks](https://dirkstrauss.com/cool-life-hacks-using-simple-technology/)
- [Email Automation Microsoft Flow – Automating Outlook.com](https://dirkstrauss.com/email-automation-microsoft-flow-automate-outlook/)
- [Automate Trello using DevOps and Wunderlist](https://dirkstrauss.com/automate-trello-using-devops-wunderlist/)

## Adding to Visual Studio

If you are creating web applications in Visual Studio, you need to do the following to add Sass CSS to your project. Below you will see that I have a normal MVC web application. I am going to add Sass CSS to this project.

![sass css demo project](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-demo-project.png?resize=420%2C465&ssl=1)

Create a folder in your project called **scss**. This is where you are going to add all your scss files.

![Adding the SCSS Folder](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-add-scss-folder.png?resize=420%2C465&ssl=1)

Right-click on the folder and add a new item. You might also see **SCSS Style Sheet (SASS)** as an option in the context menu.

![Adding the SCSS file](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-add-scss-file.png?resize=336%2C406&ssl=1)

Add the scss file and call it **custom.scss**. You can name it anything you like, just be sure to carry that through when looking at the examples in this article.

![SCSS file added](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-file-added.png?resize=420%2C465&ssl=1)


## Adding the Web Compiler

We need to be able to compile the Sass CSS file into a CSS file. To do this, in Visual Studio from the **Tools** menu click on **Extensions and Updates**. Perform a search for **Web Compiler** created by Mads Kristensen and install that.

![Adding the Web Compiler](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-add-web-compiler.png?resize=640%2C445&ssl=1)

You can now compile the Sass CSS file by right-clicking it and selecting **Web Compiler** and then clicking on **Compile file**.

![Compile the SCSS file](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-compile-file.png?resize=555%2C710&ssl=1)

You will see that the compiler creates a **compilerconfig.json** file as well as a **custom.css** and **custom.min.css** file. That is great, but I don’t want to have my CSS files output to the same location as my Sass CSS file. Let’s change that behavior.

![Locate compiler config file](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-locate-compiler-config-file.png?resize=376%2C541&ssl=1)

## Changing the CSS File Output Location

Open the **compilerconfig.json** file. You will notice that it contains the input location and output location of your files.

![Before editing compiler config file](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-compiler-config-file-before-edit.png?resize=361%2C129&ssl=1)

Modify the **outputFile** path to the Content folder. For the purposes of this article I will stick with the Content folder, but you can change the path to wherever you are storing your web application’s CSS files. You can also name your output CSS file whatever you like. I have just kept mine **custom.css**.

![After editing compiler config file](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-compiler-config-file-after-edit.png?resize=384%2C135&ssl=1)

When you save your **compilerconfig.json** file, you will notice that the Web Compiler does a build again and the CSS file is output to the path that you specified. You will also notice that the Web Compiler has created the minified CSS file for you too. You can now delete the CSS files created earlier in the Sass CSS folder.

![Generated custom css file](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-custom-css-output.png?resize=376%2C682&ssl=1)

## Using the Sass CSS FIle

Open up the **custom.scss** file and delete the contents. Add a new class called **.redButton** and set the background color to red.

![Edit scss file](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-edit-custom-scss-file.png?resize=324%2C86&ssl=1)

Next, head on over to your **Index.cshtml** View and add the **redButton** class to an element on your page. I added the class to a button on my page.

![Add custom class to Index View](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-edit-index-view.png?resize=637%2C245&ssl=1)

Swing back to the **App\_Start** folder and locate the **BundleConfig.cs** file. Add the **custom.css** file to the **StyleBundle** class.

![Edit BundleConfig file](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-edit-bundleconfig-file.png?resize=603%2C516&ssl=1)

Build your Web Application and run it. You will see that the familliar Jumbotron button is styled red instead of its default blue.

![Debug web application](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/sass-css-run-project.png?resize=528%2C664&ssl=1)

## Wrapping up

Sass CSS is a fantastic way to create custom CSS styles for your web application. There is a lot more to show you, so stick around. There will be more articles on Sass CSS in the coming weeks.

The post [Sass CSS – This Awesome Extension Will Make You Sassy](https://dirkstrauss.com/sass-css-sassy-websites/) appeared first on [Programming and Tech Blog](https://dirkstrauss.com).