3 Simple Steps To Learn SASS Demo
Some times to learn a new technology, it takes few months or a few weeks perhaps. But for
Syntactically Awesome Style Sheets aka SASS will take only few days. While writing this post I took it up and in three days I got the fundamental clear. Basically its too easy to work with. If you want your CSS to be made real fast you should definitely go for the SASS.
What Is SASS
The website says:
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
What I think it is:
A great framework for CSS which can prevent you to write more, which can give you the super flexibility to modify your code and if you love actual coding, it can give you the freedom to code your style sheet like a geek.
Step : 1
Getting Sass set up is a fairly quick process. Sass has a Ruby dependency. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It’s a single-click installer that will get everything set up for you super fast.
If you’re using a distribution of Linux you can install Ruby through the apt package manager, rbenv, or rvm.
If you’re using a Mac, congratulations, Ruby comes pre-installed.
Step : 2
After executing the
.exe file we can install the SASS in a desired location in our computer. By typing
gem install sass we will be having sass installed.
Sass can keep an eye on your
.scss files and smoothly converts them to
.css file under the hood. I actually prefer
sass --watch sass-folder:css-folder, make sure you are running this command from where you have installed SASS and also the cmd should be kept open and running for doing the conversion.
Step : 3
Now we will get an idea how it works. In our project we can have a folder containing all the
.scss files, lets name it
sass. We can also have a
css folder to have all the
.css files. We only have to write in the
.scss files, SASS will create the
.css files exactly with the same name and will place it into the
.css folder if we have
sass --watch sass:css command running.
There are few ways specified in the framework so we can use it easily. We can have our own defined variables, we can have our mixins, other
.scss files can be imported, we can call functions, we can nest classes, we can import classes and lot more. Below two basic techniques I have shown. Those two I will be using in my demo immensely. The thing is, constructing the basic structure for your application will take some time first but after when you reach their, modifying your style and introducing more classes will take very less time. You can change your theme within few minutes.
We can’t include
.scss files into our
.html files. On the browser it won’t generate the
.css file. It can help you by making you write less but you have to deal with it properly, you have to send all the parameters for your mixins and have to have those parameter in the mixin definition. If you do any mistake, don’t panic, it generates the error message for you so that you can edit the exact line again.
You can download the 3 Simple Steps To Learn SASS demo , and use it as a prototype. This post will be successful if even one of you get some benefit out of it.
This was my CSS framework which I have chosen, what is your favorite framework for CSS development?
Latest posts by Indrajit Das (see all)
- Learn And Use Magical :before and :after Pseudo-Elements In CSS - January 17, 2014
- Json To Treeview With Jquery - February 2, 2014
- Json To Treeview With Ajax - February 14, 2014