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-devIf you are using an existing project and missing the
package.jsonfile 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 scssStep 2: Create an empty style.scss file in the newly created scss folder.
$ touch scss/style.scssScss 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.
