SASS compilation to CSS - Mini Project: Build & Apply

SASS Compilation to CSS

📖 Scenario: You are creating styles for a simple webpage using SASS. You want to write your styles in SASS syntax and then compile them into CSS so browsers can understand and apply the styles.

🎯 Goal: Write a SASS file with variables and nested rules, then compile it into CSS code that styles a webpage with a blue header and a red paragraph.

📋 What You'll Learn

Create a SASS variable for the primary color

Use nested selectors for styling header and paragraph

Compile the SASS code into valid CSS

Ensure the CSS styles the header with the primary color and the paragraph with red

💡 Why This Matters

🌍 Real World

Web developers use SASS to write cleaner, easier-to-maintain stylesheets that compile into CSS browsers understand.

💼 Career

Knowing SASS and CSS compilation is important for front-end developers to create scalable and efficient styles for websites.

1

Create SASS variables and base styles

Create a SASS variable called $primary-color and set it to #0000ff. Then write styles for header that use $primary-color as the text color.

SASS

# Your code here
// Create $primary-color variable and header styles

Need a hint?

Use $primary-color: #0000ff; to create the variable. Then inside header { }, set color: $primary-color;.

2

Add nested styles for paragraph

Inside the header block, add a nested style for p that sets its color to red.

SASS

$primary-color: #0000ff;

header {
  color: $primary-color;
  // Add nested p style here
}

Need a hint?

Inside header { }, write p { color: red; } to nest the paragraph style.

3

Compile SASS to CSS

Write the compiled CSS code that results from the SASS code. It should have header with color: #0000ff; and header p with color: red;.

SASS

/* Compiled CSS code here */
/* header color and header p color */

Need a hint?

The compiled CSS replaces $primary-color with #0000ff and nests become combined selectors.

4

Complete CSS with semantic structure

Add a body selector in the CSS that sets the font family to Arial, sans-serif to complete the stylesheet.

SASS

header {
  color: #0000ff;
}

header p {
  color: red;
}

/* Add body font-family style here */

Need a hint?

Write body { font-family: Arial, sans-serif; } at the top or bottom of your CSS.