How to Set Up Sass on Ubuntu 24.04

Welcome back to the Greenhost.cloud blog! Today, we’re going to walk you through the process of setting up Sass on Ubuntu 24.04. Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that enhances the way you write CSS by adding features like variables, nested rules, and mixins. If you’re looking to streamline your CSS workflow and improve your stylesheets, following this guide will get you started in no time.

What You’ll Need

Before we dive into the setup, make sure you have the following:

• An Ubuntu 24.04 system.
• A terminal (you can use the default terminal application).
• Basic understanding of command line operations.

Step 1: Update Your System

First things first, it’s always a good idea to ensure your package list is up to date. Open your terminal and run the following command:

sudo apt update && sudo apt upgrade -y

This command updates the package list and upgrades any outdated packages on your system.

Step 2: Install Node.js

Sass is available as a Node.js package, so you need to have Node.js installed on your machine. You can install it via the NodeSource repository. First, you’ll need to install the necessary dependencies:

sudo apt install curl

Next, add the NodeSource repository for Node.js. You can choose either the LTS version or the current version. Here’s how to do it for the LTS version:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

To verify the installation, run:

node -v
npm -v

You should see the version numbers for both Node.js and npm (Node Package Manager).

Step 3: Install Sass

Now that Node.js is installed, you can easily install Sass using npm. Run the following command:

sudo npm install -g sass

The -g flag installs Sass globally on your system, making it accessible from anywhere in your terminal.

Step 4: Verify Sass Installation

To confirm that Sass has been installed correctly, check its version:

sass --version

If you see the version number of Sass, congratulations! You’ve successfully set it up.

Step 5: Create a Sample Project

Let’s create a simple project to test your Sass installation. Create a new directory for your project:

mkdir my-sass-project
cd my-sass-project

Now, create a Sass file with the .scss extension:

mkdir sass
echo '$primary-color: #333; body { color: $primary-color; }' > sass/style.scss

Step 6: Compile Sass to CSS

Now we’ll compile the Sass file into a CSS file. You can do this using the following command:

sass sass/style.scss css/style.css

Make sure the css directory exists. You can create it using:

mkdir css

Now, open the css/style.css file, and you’ll see the compiled CSS code.

Step 7: Watch for Changes

To make your development process smoother, you can set Sass to watch your SCSS files for changes and automatically compile them to CSS. Run the following command:

sass --watch sass/style.scss:css/style.css

Now, whenever you save changes to style.scss, it will automatically update style.css.

Conclusion

And there you have it! You’ve successfully set up Sass on your Ubuntu 24.04 system. With Sass, you can write more maintainable and organized stylesheets, making your web development process much more efficient.