Sass – How To Add Sass To A Project

What do we need in order to use Sass in our existing project?

• The “Live Sass Compiler” extension for VSC: Sass Compiler
• Node.js needs to be installed.

How do we install Sass?

We will use the terminal to install Sass with the following code:

npm install -g scss

This is a global installation. If you do this, you avoid installing it every time you plan to work with Sass on your projects.

How do set up our Sass files?

We start by creating a file called “style.scss” in our root folder.

We then use the “Watch Sass” function button to compile the Sass. This will generate two files:

• style.css
• style.css.map

This creates the Css file used to present the style code to the browser and the map file that tells the Sass Compiler where to store the compiled code.

Here is a sample snippet of CSS code for new projects:

/* Reset styles */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Typography */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
}

a {
  color: #007bff;
  text-decoration: none;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

/* Colors */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button,
input[type="submit"] {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: var(--secondary-color);
}

.btn:hover,
.btn-secondary:hover {
  opacity: 0.8;
}

Here is a sample snippet of SASS code for new projects:

/* Reset styles */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Typography */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
}

a {
  color: #007bff;
  text-decoration: none;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

/* Colors */
$primary-color: #007bff;
$secondary-color: #6c757d;
$background-color: #f8f9fa;

:root {
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --background-color: #{$background-color};
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button,
input[type="submit"] {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: $primary-color;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: $secondary-color;
}

.btn:hover,
.btn-secondary:hover {
  opacity: 0.8;
}