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.
|
1 |
gem put in sass |
or
|
1 |
sudo gem set up sass |
The command above will install SASS and it’s dependencies. To examine the installation simply just type the command above.
|
1 |
sass -v |
The resulting output will show something like a statement below.
|
1 |
Sass 3.4.22 (Selective Steve) |
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.
|
1 2 |
mkdir sass-illustration cd sass-example |
Then make this folder in the root folder of the project folder.
|
1 2 3 4 |
mkdir app mkdir app/sass mkdir www mkdir www/css |
Now, we can do work on the “application/sass” folder. Develop a new SASS file in that folder.
|
1 |
touch application/sass/principal.sass |
Open up and edit (app/sass/main.sass) file employing your favorites text editor or IDE. Insert these traces of SASS syntax.
|
1 2 3 4 5 6 |
$font-stack: Arial, sans-serif $main-shade: #555 human body font: 100% $font-stack coloration: $most important-shade |
Now, operate this command to compile SASS file to be CSS file.
|
1 |
sass app/sass/principal.sass www/css/most important.css |
Acquire a appear at compiled CSS file, it must be like this.
|
1 2 3 4 5 |
entire body font: 100% Arial, sans-serif shade: #555 /*# sourceMappingURL=key.css.map */ |
To checking adjustments in SASS syntax and see lively as CSS, just operate this command.
|
1 |
sass --enjoy application/sass/key.sass:www/css/primary.css |
For more introduction about SASS please refer to this link.
