Introduction to Basic SASS

What is SASS?

SCSS vs CSS

SASS benefits

CSS:
.container {
  width: 100%;
}

.container p {
  color: #333;
}


SCSS:
.container {
  width: 100%;

  p {
    color: #333;
  }
}

POPCORN HACK #1

List at least one pro and con of SCSS and CSS

Answer: Pros:

Modular SCSS

// _header.scss
.header {
  // Styles for header component
}

// _footer.scss
.footer {
  // Styles for footer component
}

// main.scss
@import 'header'; // No need for the underscore
@import 'footer';

// Styles for other components in the main file

Advanced SASS

Operators:

Conditional Statements:

Loops:

Functions:

Built-in Functions:

Extending & Inheritance:

POPCORN HACK 2:

What can you use operators for in SCSS?

Answer: To encapsulate complex logic and calculations

How Does Html Use Sass?

In HTML, you don’t directly use Sass; instead, you use the compiled CSS generated from Sass.

  1. Intall SASS: Before you use SASS you need to install it.
npm install -g sass
  1. Create SASS file: write you SASS file code and be sure to give it the extension of “.scss”
// Example sass

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

  1. Compile SASS into CSS: Use installed SASS compiled to convert the .scss file into a .css file.
sass input.scss output.css
  1. Linked compiled CSS into the HTML/JS project code
<html>
<head>
  <!--Meta data here -->

  <link rel="stylesheet" href="output.css">

  <title>Project Page</title>
</head>
<body>
 <!--HTML stuff-->
</body>
</html>

Home Work:

  1. Create a SCSS file with SASS code for a simple button, convert the file to a .css and link it into a new HTML file. The final output needs to be a button with a color of your choice
# Add Code Here