DEV Community

Dirk Strauss
Dirk Strauss

Posted on • Originally published at on

Sass CSS – This Awesome Extension Will Make You Sassy

Sass CSS – If you develop web applications and you have not heard about Sass, 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:

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

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

Adding the SCSS Folder

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

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

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

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

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

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

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

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

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

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

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

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

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 appeared first on Programming and Tech Blog.

Top comments (0)