How to install Sass on Android using termux
Sass is a CSS pre-processor. It's an extension of CSS that enables you to use things like variables, nested rules, inline imports, and more. It also helps to keep things organized and allows you to create style sheets faster. It reduces repetition of CSS and therefore saves time.
Today I will show you how to install Sass in Android devices by using Termux.
Termux is an Android terminal emulator and Linux environment app that works directly with no rooting or setup required. Termux combines powerful terminal emulation with an extensive Linux package collection.
You might like
- How to install ReactJS on Android using termux
- The Routine of Becoming a Junior Web Developer in 14 Weeks
Sass Example
/* Define standard variables and values for website */$bgcolor: lightblue;$textcolor: darkblue;$fontsize: 18px;
/* Use the variables */body { background-color: $bgcolor; color: $textcolor; font-size: $fontsize;}Before you continue you should have a basic understanding of the following:
- HTML
- CSS
What is Sass?
- Sass stands for Syntactically Awesome Stylesheet
- Sass is an extension to CSS
- Sass is a CSS pre-processor
- Sass is completely compatible with all versions of CSS
- Sass reduces repetition of CSS and therefore saves time
- Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
- Sass is free to download and use
Why Use Sass?
Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
How Does Sass Work?
A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.
This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.
Sass Installation on Android
First of, you need to install two applications:
- Termux
- Code Editor
Now, open the terminal (Termux) and type some commands. After typing each command, press the enter key.
List of all commands:
- apt update command lets your system know which packages are available for upgrade, and where the software needs to be restored.
- apt upgrade -y can then act on this information and upgrade all installed packages to their latest versions.
- termux-setup-storage to allow Termux to access photos, media and files on your device.
- pkg install nodejs -y to install NodeJS on your device.
- node -v to check the version on NodeJS.
- npm -v to check the version of node package manager-npm.
- npm install -g sass to install the latest version of Sass on your device.
Okay, now open the code editor and create three files (index.html, style.css and style.scss).
Then open index.html file and type the basic HTML structure and also link up your external style.css file and type some markup like <h1>Sass</h1>.
Now, open the style.scss file and type some Sass style of your html element like:
$myColor: magenta;
h1{ color: $myColor}Then you need to compile this Sass code in your CSS file.
So, open the terminal again and type the following command:
8. sass -w style.scss style.css
Now open the editor and view the style.css file.
You can learn Sass from w3schools.com/sass and sass-lang.com
%20Rahi.jpg)
Mohammad Rahi
MERN Stack and React Native Developer
Thanks a lot it works. But what if my sass and css files are in different folders how do I compile that file?
If your CSS and Sass files are in different folders, type: sass -w /folderName/style.scss /folderName/style.css
Thanks for staying with TechSheet!
Thanks for the blog. But I think termux can't access my folder even though I have run the command to allow it. Every time I try to open a folder it tell me ' on such file or directory'. Can you help me please?
Termux can access all folders. Please you have to use the right path of the directory.
Aye thankyou so much! It works like a charm!!