Why data types matter in SASS - See It in Action

Why Data Types Matter in SASS

📖 Scenario: You are creating a simple style sheet for a website. You want to use SASS variables to control colors and spacing. Understanding data types in SASS helps you avoid mistakes and write better styles.

🎯 Goal: Build a SASS file that uses variables with correct data types for colors and spacing, then apply them to style a simple webpage layout.

📋 What You'll Learn

Create variables with correct data types: color and number with units

Use variables in style rules

Understand how mixing data types can cause errors

Write valid SASS code that compiles to CSS

💡 Why This Matters

🌍 Real World

Web developers use SASS variables with correct data types to create consistent and maintainable stylesheets for websites and apps.

💼 Career

Knowing how to manage data types in SASS is essential for front-end developers to write clean, scalable CSS and collaborate effectively in teams.

1

Create SASS variables with correct data types

Create a SASS variable called $primary-color and set it to the color #3498db. Also create a variable called $spacing and set it to 1.5rem.

SASS

// Create $primary-color and $spacing variables with correct values
// Your code here

Need a hint?

Colors in SASS are written like hex codes, and spacing needs units like rem.

2

Add a configuration variable for border radius

Create a SASS variable called $border-radius and set it to 0.5rem to control rounded corners.

SASS

$primary-color: #3498db;
$spacing: 1.5rem;
// Create $border-radius variable with value 0.5rem
// Your code here

Need a hint?

Remember to include units like rem for size values.

3

Use variables in style rules

Write a style rule for a class .button that sets background-color to $primary-color, padding to $spacing, and border-radius to $border-radius.

SASS

$primary-color: #3498db;
$spacing: 1.5rem;
$border-radius: 0.5rem;

// Create .button style using the variables
// Your code here

Need a hint?

Use the variables directly inside the style rule properties.

4

Complete with a hover effect using color manipulation

Add a :hover style to .button that changes background-color to a darker shade using darken($primary-color, 10%).

SASS

$primary-color: #3498db;
$spacing: 1.5rem;
$border-radius: 0.5rem;

.button {
  background-color: $primary-color;
  padding: $spacing;
  border-radius: $border-radius;

  // Add :hover style to darken background color
  // Your code here
}

Need a hint?

Use the &:hover selector and the darken() function with the color variable.