Preprocessor support (SCSS, PostCSS) in Svelte - Mini Project: Build & Apply

Using SCSS Preprocessor in a Svelte Component

📖 Scenario: You are building a simple Svelte component for a user profile card. You want to style it using SCSS to organize your styles better and use nesting.

🎯 Goal: Create a Svelte component named UserCard.svelte that uses SCSS for styling. The component should display a user name and a short bio with nested SCSS styles.

📋 What You'll Learn

Create a UserCard.svelte component with basic HTML structure

Add a <style lang="scss"> block for SCSS styles

Use nested SCSS selectors to style the user name and bio

Use variables in SCSS for colors

💡 Why This Matters

🌍 Real World

Using SCSS in Svelte components helps keep styles organized and maintainable, especially in larger projects with many components.

💼 Career

Many frontend jobs require knowledge of preprocessors like SCSS and how to integrate them with modern frameworks like Svelte for scalable styling.

1

Create the basic Svelte component structure

Create a Svelte component named UserCard.svelte with a <script> block defining a user object with name set to "Alice" and bio set to "Loves hiking and photography.". Add HTML inside the component to display the user name in an <h2> and the bio in a <p>.

Svelte

  // Define user object with name and bio
  // Your code here



  
  

Hint

Remember to create a user object inside the <script> block and use curly braces to display its properties in the HTML.

2

Add SCSS style block with a color variable

Add a <style lang="scss"> block below the HTML. Inside it, create a SCSS variable named $primary-color and set it to #3498db (a blue color).

Svelte

  const user = {
    name: "Alice",
    bio: "Loves hiking and photography."
  };



  {user.name}
  {user.bio}



  // Define $primary-color variable here
  // Your code here

Hint

Use lang="scss" in the style tag to enable SCSS. Define the variable with $primary-color: #3498db;.

3

Use nested SCSS selectors to style the user card

Inside the <style lang="scss"> block, add styles for the .user-card class. Set its border to 1px solid $primary-color, padding to 1rem, and border-radius to 0.5rem. Then nest styles for h2 inside .user-card to set its color to $primary-color and margin-bottom to 0.5rem. Also nest styles for p to set font-style to italic.

Svelte

  const user = {
    name: "Alice",
    bio: "Loves hiking and photography."
  };



  {user.name}
  {user.bio}



  $primary-color: #3498db;

  // Add styles for .user-card and nested h2 and p here
  // Your code here

Hint

Use nesting inside .user-card to style h2 and p. Use the SCSS variable $primary-color for colors.

4

Complete the component with accessibility and responsive design

Add an aria-label attribute with value "User profile card" to the div with class user-card. Then add a media query inside the SCSS style block for screen widths below 400px that sets the padding of .user-card to 0.5rem.

Svelte

  const user = {
    name: "Alice",
    bio: "Loves hiking and photography."
  };



  {user.name}
  {user.bio}



  $primary-color: #3498db;

  .user-card {
    border: 1px solid $primary-color;
    padding: 1rem;
    border-radius: 0.5rem;

    h2 {
      color: $primary-color;
      margin-bottom: 0.5rem;
    }

    p {
      font-style: italic;
    }
  }

  // Add media query for max-width 400px here
  // Your code here

Hint

Add aria-label="User profile card" to the div. Use @media (max-width: 400px) in SCSS to change padding for small screens.