How to compile your SASS code to CSS from the command line

Daniel Omehe — Thu, 16 Nov 2023 00:23:02 +0000

Hello there

In this tutorial, I'll share how to compile SCSS files to CSS using only the command line and no external compilers or task runners. Let's dive into it...

Table of content

Compiling a single Sass file to CSS.
Compiling multiple Sass files to CSS.

Note: This course requires you to have prior knowledge of HTML and at least intermediate knowledge as neither will be covered in this tutorial.

Before we begin you need to have Nodejs and npm installed on your local computer, if you don't have Nodejs installed, install them here: .

PS: NPM comes pre-installed with Nodejs so you don't need to install it separately.

1. Compiling a single Sass file to CSS.

Open the terminal on Vs code, to initialize npm in your local folder run:

npm init -y

This creates a package.json file that contains information about your project.

Once NPM is initialized install Sass globally on your local machine by typing

npm install -g sass

Once you've installed Sass globally check the version by typing

sass --version

Next, create a sass file, input.scss, open the terminal
and run the following command

"sass input.scss output.css

This starts the compiler which outputs the compiled sass code from into output.css. To watch for changes to your code and compile on saving the file add the watch flag to the command like so:

sass --watch input.scss output.css

This creates a CSS file containing the compiled sass code.

2. Compiling multiple Sass files to CSS.

Suppose you're working on a large project that requires you to write a lot of style rules and writing all sass code in 1 file can be bulky you can split your code into multiple files and then compile them all at the same time. To do this create a folder named sass or scss in your project for storing all your sass files and then create a CSS folder where the compiled CSS code files will be stored. Then in your terminal run the following command

sass --watch scss:css/

This starts the compiler which compiles all sass files in the scss folder and outputs the compiled code into the CSS folder.

Thanks for reading.

Adios!

How to host static sites on Github pages

Daniel Omehe — Mon, 13 Nov 2023 23:42:02 +0000

Finally finished your first project, you're so excited you want to show it to everyone but then you remember you don't know how to host a site online? Well this tutorial covers how to get you started with hosting static pages on GitHub pages. Let get into it.

Prerequisites:

HTML
CSS
And, maybe some JavaScript

Note: This tutorial assumes you already know a bit of HTML and CSS. So i won't be addressing those in this tutorial.

To get started you'll need to have git installed, if you don't already have git installed on your computer you can get it here: https://git-scm.com/.

Next, create a folder and add an HTML and CSS files. I'll be creating a simple application with just a loading spinner animation. Copy and paste the following code in your local file:

Index.html

<!Doctype html>
   <html lang="en">
     <head>
        <title>Git And Sass practice</title>
        <link rel="stylesheet" href="./css/styles.css" />
    </head>
    <body>
        <div class="loading"></div>
    </body>
</html>

Styles.css

body {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  color: white;
  font-size: 5rem;
  text-align: center;
}

.loading {
  width: 100px;
  height: 100px;
  border: 5px solid #fff;
  animation: spin 2s linear infinite;
  position: relative;
}

.loading::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  position: absolute;
  left: -0.3rem;
  top: -0.3rem;
  animation: spinbefore 2s linear infinite;
}
.loading::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  position: absolute;
  left: -0.3rem;
  top: -0.3rem;
  animation: spinafter 2s linear infinite;
}

@keyframes spin {
  50% {
    transform: rotate(360deg);
  }
}

@keyframes spinbefore {
  50% {
    transform: rotate(30deg);
  }
}

@keyframes spinafter {
  50% {
    transform: rotate(60deg);
  }
}

With that done, open your browser and visit the GitHub official website, follow the steps to create an account if you do not have one already, i won't be covering that in this tutorial.

If you already have an account login, once that is done it takes you to your this page.

Click on new on the left sidebar to create a new repository.

On the next page enter your repo name, click on add Readme and then click on create repository to finish creating your repo.

Voila! you just completed the first step to hosting you site. Here is what your repo looks like for a start but as you make changes and push it is bound to reflect all the files from your project.

Next, we need to connect the remote repo to your local repo, open git bash/cmd on windows and terminal on mac. I prefer to use terminal from my vs code editor that way i don't have to leave my editor.

Open terminal and run git init to initialize an empty git repo in the folder you already have open. Then open GitHub and on the new repo click on the green code button and copy the repo url.

Now to connect the local repo to the remote repo you can either run

git clone to create a local close of your repo

git remote add origin [the-repo-url-you-copied]

and then run to pull and merge all files in the remote repo with those in the local one.

git pull origin main

Now, run git add . to add all files in the to the staging area

and then run git commit -m "your-commit-message"

and then run git push origin main to push all changes to your remote repo.

Then, open GitHub and go to the settings tab, click on the pages tab on the left sidebar

In the pages tab select deploy from a branch, a little further down select the branch to deploy from and click save

And like that your site is live after a few minutes reload page and click visit site.

Thank you for reading.

Live version of my local example: https://danielomehe.github.io/sass-compile/

DEV Community: Daniel Omehe

How to compile your SASS code to CSS from the command line

Table of content

1. Compiling a single Sass file to CSS.

2. Compiling multiple Sass files to CSS.

How to host static sites on Github pages