It is often said that .NET are not comfortable with the new environment for a variety of reasons. One of the reasons is they didn’t use the following much talked about technologies: Less, Sass, npm, Gulp, Grunt, Bower, OWIN.
Not all developers remain updated with the cutting edge technologies. Many companies use an old fashioned way of doing the things and their developers might not get chance to work with these kinds of technologies at all. In this article series we will explain the basics of all these technologies as well as major ASP.NET vNext changes you must be aware of. This article is for the beginners in the technologies mentioned above as well as in ASP.NET vNext.
To begin with, the first part tells something about Less and Sass. So, let’s start.
Old vs. modern way of creating ASP.NET applications
Let’s outline the tasks that many simple web applications follow. They mainly don’t use the above technologies. They are done mostly with what comes with the default installation of .NET, VS and web standards.
The traditional way of developing ASP.NET applications is as follows:
- You create an ASP.NET web application project in VS.
- You write application specific server side code. This could be done either with web forms or with MVC.
- You might refer .NET framework assemblies and custom components using References folder in the Solution Explorer.
- You might install some NuGet packages using options in the Solution Explorer.
- Create CSS style sheets for your application.
- You might do some unit testing for your application.
- Finally, deploy your application on the server.
Many modern, big applications use this approach to produce a better code-base and to manage it better.
- Create an ASP.NET web application project in VS.
- Program application specific server side code. This can be done either with web forms or with MVC.
- You might refer .NET framework assemblies and custom the components using References folder in the Solution Explorer.
- You might install some NuGet packages using “Manage NuGet Packages” options in the Solution Explorer.
- You create style sheets using some CSS pre-processor such as Less and Sass.
- You compile the Less and Sass files into plain CSS.
- You do unit testing of your application.
- You tweak the configuration file (JSON format, more on this in later parts) to adjust settings such as connection string.
- Finally, you deploy the application on the server or in cloud.
As a first instalment we shall discuss the basics of Less and Sass.
Basics of Less and Sass
To create CSS style sheets and attach them to web pages is a common task one must do. Although this task is straight and simple it has troubles of its own. Consider the following style rules:
The official Less website lesscss.org defines Less like this:
“Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.”
The official Sass website sass-lang.com says :
“Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies.”
Installing and using Less
Firstly go to Node.js website and install Node Package Manager on your machine. Then open the Command Prompt and set the following command:
npm install -g less
Less will get installed on your machine. Once installed you can use Less compiler to compile Less code to plain CSS.
Next, design an empty ASP.NET MVC project in VS and add a LESS style sheet to it.
Notice that Less files are stored with .less extension. Instead of using this template you can also add a text file manually and save it with .less extension.
Then add the following “code” to the Less style sheet:
The above code declares two Less variables – @textSize and @fontName – and also stores some values in them.
Browsers won’t understand .less files unless you compile them to plain CSS. To do so you need to invoke Less compiler as follows:
$ lessc StyleSheet1.less > StyleSheet1.css
The Less command line compiler – lessc – takes two things. The .less file name and the .css file name where the result of compilation is to be stored. If you invoke the above command successfully StyleSheet1.css will contain something like this:
This is plain old CSS!
Now you can add a <link> reference to StyleSheet1.css in all the ASP.NET web forms or MVC views.
Installing and using Sass
Sass works on similar lines as Less but there with a few differences. Install Ruby on your development machine. You can do so by visiting Ruby Installer website. Once installed you need to invoke Command Prompt as before and issue the following command.
Gem install sass
This will install Sass on your machine.
Next, add a text file to your Visual Studio project and name it – StyleSheet2.scss
Note that there are two syntax variations for Sass. One uses file extension of .sass and the other uses file extension of .scss. The later is the newer syntax and hence is recommended.
Now add the following “code” to the .scss file:
As you can see, the syntax is quite similar but uses $ instead of @ for variable names.
To compile this Sass code to plain CSS, open Command Prompt and issue this command:
sass –watch “C:\Demos\StyleSheet2.scss”
This will compile the Sass code and create StyleSheet2.css file for you. If you open the .css file you should something like this:
/*# sourceMappingURL=stylesheet2.css.map */
You can now refer the StyleSheet2.css file in your web forms or views.
We conclude for now. Keep coding!!
Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.
If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.
Stay connected to CRB Tech for more technical optimization and other updates and information.