CSS

SASS Installation And Implementation By Prepros

Install Prepros

First Download Prepros. Prepros is available for Windows, Mac, and Linux and free to use…

After downloading Prepros, install it on your system just like any other desktop software

Create the Project folder and files

Let’s create the files for the SASS project.
like:

demo-folder
- scss-folder
  - style.scss
- css-folder
  - style.css if not exists, automatically generated.
demo.html

Set Up the SASS Project

Let’s set up the SASS project in Prepros. You can do this two ways:

Drag-and-drop the project folder into the Prepros window
or click Add a project

Now start writing code in style.scss file and save it. while saving your changes in style.scss file, it creates style.css file if not exists and updated every time automatically.

style.scss

body {
  margin: 0;
  padding: 0;

  h1 {
   color: #0675c0;
  }
  p {
   color: #000;
  }
}

output style.css:

body {
  margin: 0;
  padding: 0;
}
body h1 {
  color: #0675c0;
}
body p {
  color: #000;
}

demo.html

<!DOCTYPE html>
<html>
<head>
<title>SASS Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>SASS Demo</h1>
<p>SASS Installation And Implemetation By Prepros</p>
</body>
</html>