Dot Net Training

Prerequisite Before learning ASP. NET

Dot Net Training

Introduction To LESS & SASS

CRB Tech reviews brings you the basics of LESS & SASSA very hot topic lately is which CSS preprocessor language should one choose? There are some on-line debates coming up every few days it seems. Now the more concern is which one language is best.

Really short answer: Sass

Slightly longer answer: Sass is better on a whole bunch , but if you are already contented in LESS, that’s cool, you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

Dot Net Training

A quick introduction to Less and Sass

Designing CSS style sheets and attaching them to web pages is a basic task one needs to do. Although this task is straightforward and very simple it has some troubles of its own. Lets consider the following style rules:

h1 {color: #0026ff;font-family: Arial;font-size: 20px;}

h2 {color: #0026ff;font-family: Arial;font-size: 16px;}

Dot Net Training

Here there are two style rules that use the same color and font-family value. Image a case where you are using a particular color code and font family at 100 places. Although this is perfectly fine as far as final display is concerned what if you need to change the color from #0026ff to something else? You need to change it at all those 100 places. How it would be if you can use variables in CSS? Pretty nice. In this way a value can be stored in a variable and the variable can be used in all the 100 places. This is how CSS pre-processors such as Less and Sass come into scene.

Either Less and Sass can help you achieve the same goal but they use little different syntax.

The official Less website lesscss.org defines Less like this:

LESS is a CSS pre-processor; it extends the CSS language, adding features that allow variables, mix-ins, functions and many other techniques that help you make CSS which is more maintainable, them-able and expendable.

Dot Net Training

Sass lets you utilize features that don’t exist in CSS yet like variables, nesting, mix-ins, inheritance and other goodies.

Installing and using Less

Let’s see how Less can be used with a simple example.

First of all visit Node.js website and install Node Package Manager on your development machine. Then open the Command Prompt and issue the following instruct:

npm install -g lessThis will install Less on your device. Once installed you can use Less compiler to compile Less code to plain CSS.

Next, develop an empty ASP.NET MVC project in Visual Studio and add a LESS style sheet .

Take a look how the Add New dialog has a template for this item:Notice that Less files are stored with .less extension. Instead of using this template

you can also manually add a text file and save it with .less extension.

Dot Net Training

Then add the following “code” to the Less style sheet:

@textSize:20px;@fontName: Arial;

h1{color:blue;font-family:@fontName;font-size:@textSize;}

The above code accounces two Less variables – @textSize and @fontName – and also stores some values in them. Note that the h1 style doesn’t code font-family and font-size. It uses @textSize and @fontName variables declared earlier. Now if you choose to change the font size and family all you need to do is alter the variable value.

Browsers doesn’t understand .less files unless you compile them to plain CSS. To do so you need to invoke Less compiler as shown:

$ lessc StyleSheet1.less > StyleSheet1.cs

Dot Net Training

The Less command line compiler – lessc – takes two things. The .less file name and the .css file name where the outcome of compilation is to be stored. If you implore the above order successfully StyleSheet1.css will contain something like this:

h1 {color: blue;font-family: Arial;font-size: 20px;}

This is simply 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 are some differences. Firstly, one need to install Ruby on the development machine. Visit Ruby Installer website. Once installed you need to invoke Command Prompt as before and write the following command (make sure to navigate to the Ruby installation path).

Dot Net Training

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 get something like this:

h1 {color: blue;font-family: Arial;font-size: 20px; }

/*# sourceMappingURL=stylesheet2.css.map */

You can now refer the StyleSheet2.css file in your web forms or views.

If you are considering to undergo .Net training then our CRB Tech .Net Training center would be very helpful in fulfilling your aspirations. Our .Net certification course could be immensely useful for you.

Stay connected to this page of CRB Tech reviews for more up-gradation and other resources.

Thank You..!

Dot Net Training