Monaca IDE’s Hidden Sass Feature
When working on large scale mobile applications, managing code and designs for multiple pages can be a tedious process. With Monaca Cloud IDE’s recently released integrated terminal feature, doors have been opened to support numerous tools to minimize these tasks.
Sass, a CSS extension language, is a great way to manage your project’s CSS and increase your productivity levels by introducing preprocessor, variables, control syntax, and more.
In this blog, we will explain how the integrated terminal feature brings solutions for code management, how to set up a Sass build structure, help you get started with a working example, and how to automate your build process.
Integrated Terminal
With Monaca’s integrated terminal feature, you can run virtually any Linux commands right from the browser. For example, commands such as node
and npm
can be used to install, setup, build, and run highly efficient and flexible development and build environments. Under the covers, the terminal gives you access to a Debian distribution environment at version 9.4.
Before we can setup Sass, we must launch our project within the new Cloud IDE. If you have not already switched, you can do so by clicking on the Deprecation Notice link on the top right corner of the previous version of the IDE. You will still be able to return to the old IDE at any time.
In Summer of 2018, the early version of Monaca Cloud IDE is to be discontinued.
Once the new IDE has loaded, we will open an integrated terminal by clicking on the (+) icon next to the Preview Log on the bottom center panel.
Setting up Sass
Now that we have an integrated terminal window open, we can begin installing dependencies by executing the following command.
$ npm install node-sass nodemon —save-dev
If you are using an existing project and missing the
package.json
file please first initialize your project withnpm init
.
The node-sass
dependency is used for compiling Sass code into browser readable CSS.
The nodemon
dependency is used for monitoring file changes and automatically executing the Sass build process.
Once the installation has completed, open the package.json
file from the tree and add the following scripts seen in the example below.
Each npm-script is an alias that executes a specified shell script. The purpose of an alias is to simplify a command or a group of commands.
The build
script compiles the scss/style.scss
file and outputs browser readable CSS to www/css/style.css
.
The watch
script automatically triggers the build
process when scss
extension files are changed.
Usage Example
Now that we have configured our build environment with necessary dependencies, we can start writing Sass code and using it within our project.
Step 1: Create a Sass folder, from the terminal, and place it at the root level of the project.
$ mkdir scss
Step 2: Create an empty style.scss
file in the newly created scss
folder.
$ touch scss/style.scss
Scss and Sass are almost identical, and the terms tend to be used interchangeably. One example difference is the syntax between the two formats. Scss files continue to use curly brackets
{ }
, similar to native CSS, while the Sass syntax omits them.
Step 3: Refresh the Cloud IDE tree to see the newly created file and folder.
Step 4: Open the style.scss
file and add:
Step 5: Execute the npm run build
in the terminal.
From these steps, we successfully created and compiled a Sass file into a browser readable CSS file. Changes can be viewed and tested from the Preview panel.
Sass Build Automation
The example above showed us how to build our Sass files on demand and this is perfect if we are making a single simple change. If we are making numerous changes, it would be beneficial to build and update the preview automatically. This is where the watch
script comes into play.
In the terminal, run the command:
$ npm run watch
This command initiates a daemon service that will monitor for any files changes with a file extension of scss
.
Let’s make some change to the style.scss
file and save. Watch how the terminal automatically detected changes and runs the build process. The preview panel also automatically reloaded and displays our changes.
Summary
Using Sass makes it easy to manage application-wide themes as a whole. Furthermore, by utilizing the integrated terminal feature, it is possible to automate all the work and reflect changes in the previewer.
This example only covered Sass and did not scratch the surface of all the toolsets available to help speed up and improve your app development process. As mentioned earlier, this recently released terminal feature just opened the door to many possibilities; you can take advantage of this feature and start building quickly some awesome apps.