Simplifying CSS in Visual Studio With Sass

Create more maintainable CSS in less time.
Course info
Rating
(265)
Level
Intermediate
Updated
Jul 22, 2014
Duration
1h 57m
Table of contents
Description
Course info
Rating
(265)
Level
Intermediate
Updated
Jul 22, 2014
Duration
1h 57m
Description

Sass makes writing and maintaining CSS easier and quicker. It is a superset of CSS that provides time-saving features, but still compiles to standard CSS. Using Sass, we can get better readability and organization, reduced duplication and maintenance cost, use calculated values and variables, and write less repetitive boilerplate CSS.

About the author
About the author

With over 15 years experience, Jason Roberts is a Microsoft .NET MVP, freelance developer, and author.

More from the author
Working with Files and Streams in C#
Intermediate
3h 13m
Oct 12, 2018
Error Handling in C# with Exceptions
Intermediate
1h 37m
Aug 6, 2018
More courses by Jason Roberts
Section Introduction Transcripts
Section Introduction Transcripts

Getting Started
Hi, I'm Jason Roberts from Pluralsight. Welcome to this course on Simplifying CSS in Visual Studio with Sass. In this module, we're going to get an overview of some the benefits of using Sass and also how we can get started in Visual Studio. So in this module, we'll start off by looking at why we might want to use Sass and what some of the benefits are such as reduced maintenance costs and reduced duplication. We'll then get a high level overview of how Sass works and how it essentially converts a Sass file to a plain CSS file. We'll get an overview of some of the fundamental Sass features such as variables and mixins. We'll then see how Sass fits in with Visual Studio and how we can use it with simple HTML websites or ASP. NET website whether they be web forms or ASP. NET MVC based and finally, we'll see how we can create a new website in Visual Studio, how we can create a Sass file and compile it to CSS, and also how we can then go and make changes to our Sass file and see the changes show up in our website.

Using Sass in Visual Studio Web Applications
Hi, welcome back to this final module. In this module we're going to look at some specific usages of Sass in Visual Studio Web Applications whether they be ASP. NET MVC or Web Forms. We're going to start off this module by seeing how we can refactor an existing ASP. NET web forms application to replace the CSS that it contains with Sass files. We'll start off by manually converting a CSS file to an scss file and then we'll see how we can use Web Workbench to do the conversion for us. Once we've refactored two Sass files, we'll see how we can introduce color variables for styling. Next, we'll see how we can convert an ASP. NET MVC application to use Sass. So we'll start off with a Bootstrap ASP. NET MVC 5 application and we'll see how we can go and download the Bootstrap Sass files and replace the existing Bootstrap CSS with the new Sass files and then we'll see how we can modify the Sass Bootstrap variables to start to theme our application. Finally, we'll look at one technique where we can reuse our Sass files across different ASP. NET applications. So we'll see how we can create a common project that contains Sass files that relate to common brand styles that should be applied across all of the websites in an organization. Once we've created these common brand files, we'll see how we can reference them from multiple ASP. NET applications.