Prerequisite Before learning ASP. NET

1

• Prerequisite Before learning ASP. NET

Dot Net Training
2

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, thats cool, you are
doing yourself a favor by preprocessing. Much
longer answer Read on.
Dot Net Training
3

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
4
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
5
Sass lets you utilize features that dont exist
in CSS yet like variables, nesting, mix-ins,
inheritance and other goodies. Installing and
using Less Lets 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
6
Then add the following code to the Less style
sheet _at_textSize20px _at_fontName
Arial h1 colorblue font-family_at_fontName fon
t-size_at_textSize The above code accounces two
Less variables _at_textSize and _at_fontName and
also stores some values in them. Note that the h1
style doesnt code font-family and font-size. It
uses _at_textSize and _at_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 doesnt understand
.less files unless you compile them to plain CSS.
To do so you need to invoke Less compiler as
shown lessc StyleSheet1.less gt StyleSheet1.cs
Dot Net Training
7
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 ltlinkgt 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
8
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 / sourceMappingURLstylesheet2.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.
Dot Net Training
9
Thank You..!
Dot Net Training