This is the age of revolutions. For me at least as a web developer, I am seeing it last few years. Once AJAX came into the market and become popular, it changed the whole web development and web experience as a user. Microsoft came up with the whole new AJAX control toolkit to make the UI very UI intuitive. The Client side technologies like JavaScript, CSS etc are always pain for a web developer like me. But jQuery gave a new flavor to Client side scripting and now get used in almost all web projects. There are many new plugins of jQuery came into existence and few of them got widely used.
And now it’s turn to CSS, I faced tough time working with CSS but new things are coming up. Microsoft always embraces these technologies so that the developer gets the benefit of these technologies and get the first class experience in their Visual studio itself. Today we’ll talk about SASS ( Syntactically awesome stylesheets).
So What is Sass?
As the full form of Sass it self says (Syntactically awesome style sheets). As per the sass website it is “Sass is the most mature, stable, and powerful professional grade CSS extension language in the world“. One does not need to learn any new technology instead uses the existing technology/learning and use that to write wonderful CSS in a very simple way.
So how does it actually works?
A Sass file is compiled into an normal CSS file while execution. When we run the application, the sass file get converted to css file and returned to the browser.
Next how to use Sass?
As now Microsoft introduces a new and very powerful tool Nuget to install packages/plugins for the project. It’s very simple and easy to install. In this example, I’ll be using ASP.NET, So I have installed the package SassAndCoffee.AspNet via nuget as
Go to -> Package Manager Console and type
Install-Package SassAndCoffee.AspNet
else you can also install via Manage Nuget Package.
It adds few dlls and some config entries in web.config. After installing it, It adds in HTTPModule which looks for any incoming request for all css request and tries to find the css file and if css file does not available then it looks for scss file and if it is available the process the scss file and convert it into css file and return it. So your page does not need to know about all the behind the seen processes, you just need to include the normal css file in your project.
.Sass provides us the capability to use programming language feature for writing StyleSheet. SASS provides us two syntaxes. The new syntax is known as SCSS (Sassy CSS) that is easy to write and also a superset of CSS3. I’ll be using it our posts. The file extension for it is scss. While the other older one is normal sass and known as indented css and now is obselete.
Let’s see the basic feature of Sass. Sass provides us the capability
- Declaring Variables
- Allows Operations
- Allows Nesting
- Mixins
- Extend/Inheritance
Doesn’t it look interesting? You get the basic features of any programming language for your css and you dont need to learn anything for this to use except some basics about how to use it.
So in this post, we’ll see the Variable and operations.
Variables - It means we can created the variables and use it in our file wherever require similar like in C# or other language. So variables can be created as
$common-font: verdana; $common-font-size : 9px; $basecolor : #000; $custom-border : solid 5px, #000;
Variable could contain single value or contain list of items as $custom-border contains multiple values. So in my application, I have created a file with extension as scss ( Custom.scss) and that contains
Now if we run the application and access the file with URL
http://localhost:64983/style/custom.css
then it returns the processed css file as
All the processing like here replacing with actual values, is done at server side. So it does not affect any client side catching.
If we have here option to create variable, then it should also provide the capability to do some operation over it. Yes, we can do it. We’ll discuss this in next part.
Also if we try to access the URL
http://localhost:64983/style/custom.scss
then it returns the error
HTTP Error 404.3 – Not Found
Hope you have enjoyed this post. In next post, I’ll discuss about various operations and few other examples.
Cheers,
Brij
