SASS ↪ CSS Installation & File Management


Advanced CSS, will require more effort to keep CSS syntax. That why we have to have a CSS preprocessor for creating CSS simple to retain and extended. Current, popular CSS preprocessors are SASS. There is two code syntax of SASS. One with bracket and semicolon which is phone calls SCSS, the other one is without having semicolon and bracket that communicate SASS itself. SCSS is produced for front stop developers that familiar with CSS. You can open SCSS in our Ionic 2,3 & 4 hybrid application tutorial from divnote.com

1. How to Install SASS

Before you install SASS, you need to install Ruby first. You can refer to Ruby official web site see our introduction of SASS here. After all the necessary resources put in, we are going to installing SASS. You need to open a terminal or command, in Windows use Ruby command line (CLI). Type this command.

or

The command above will install SASS and it’s dependencies. To examine the installation simply just type the command above.

The resulting output will show something like a statement below.

2. Working with SASS

General SASS files place in “application/sass” or “application/scss” folder inside test folder and CSS consequence place in “www/css” or “community/css”. Or else, you can put that data no matter what you like as the specifications of your challenge. In this case in point, let’s make a world wide web job folder. In the terminal or command go to your assignments folder.

Then make this folder in the root folder of the project folder.

Now, we can do work on the “application/sass” folder. Develop a new SASS file in that folder.

Open up and edit (app/sass/main.sass) file employing your favorites text editor or IDE. Insert these traces of SASS syntax.

Now, operate this command to compile SASS file to be CSS file.

Acquire a appear at compiled CSS file, it must be like this.

To checking adjustments in SASS syntax and see lively as CSS, just operate this command.

For more introduction about SASS please refer to this link.

Leave a Reply

Your email address will not be published. Required fields are marked *