CRB Tech reviews brings you the basics of LESS & SASS A 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. For more information on .net Visit : www.crbtech.in

1. Dot Net Training
Prerequisite Before learning ASP. NET

2. Dot Net Training
Introduction To LESS & SASS
CRB Tech reviews brings you the basics of LESS & SASS
A 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.

3. 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;
}

4. 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.

5. 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.

6. 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

7. 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).

8. Dot Net Training
sass –watch “C:DemosStyleSheet2.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.

9. Thank You..!
Dot Net Training

10. Thank You..!
Dot Net Training