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.

Practice

1. What attribute do you add to a <style> tag in a Svelte component to use SCSS preprocessing?

easy

A. style="scss"

B. type="scss"

C. preprocess="scss"

D. lang="scss"

Solution

1. Step 1: Understand Svelte style tag syntax

   In Svelte, to enable a CSS preprocessor like SCSS, you add an attribute to the <style> tag.

2. Step 2: Identify the correct attribute for SCSS

   The correct attribute is lang="scss", which tells Svelte to preprocess styles with SCSS.

3. Final Answer:

   lang="scss" -> Option D

4. Quick Check:

   Use lang="scss" for SCSS preprocessing [OK]

Hint: Use lang="scss" on style tag for SCSS [OK]

Common Mistakes:

• Using type="scss" instead of lang
• Adding preprocess attribute which is invalid
• Putting style="scss" which is not recognized

2. Which of the following is the correct way to enable PostCSS in a Svelte component's style block?

easy

A. <style lang="postcss">

B. <style postcss>

C. <style type="postcss">

D. <style preprocess="postcss">

Solution

1. Step 1: Recall attribute for preprocessors in Svelte

   Svelte uses the lang attribute on the <style> tag to specify preprocessors.

2. Step 2: Match the correct syntax for PostCSS

   The correct syntax is <style lang="postcss">. Other attributes like type or preprocess are not valid here.

3. Final Answer:

   <style lang="postcss"> -> Option A

4. Quick Check:

   Use lang="postcss" to enable PostCSS [OK]

Hint: Remember lang="postcss" for PostCSS styles [OK]

Common Mistakes:

• Using postcss attribute without lang
• Using type instead of lang
• Trying preprocess attribute which is invalid

3. Given this Svelte component style block:

<style lang="scss">
$primary-color: #3498db;
.button {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

What will be the color of the button text on hover?

medium

A. #3498db

B. A color 10% darker than #3498db

C. An error because darken() is not supported

D. Transparent

Solution

1. Step 1: Understand SCSS variable and nesting

   The variable $primary-color is set to #3498db. The nested hover selector uses darken($primary-color, 10%).

2. Step 2: Know SCSS darken() function behavior

   The darken() function reduces brightness by 10%, so the hover color is a darker shade of #3498db.

3. Final Answer:

   A color 10% darker than #3498db -> Option B

4. Quick Check:

   SCSS darken() darkens color by given percent [OK]

Hint: darken() in SCSS darkens color by given percent [OK]

Common Mistakes:

• Thinking darken() is unsupported in Svelte
• Assuming hover color stays the same
• Confusing variable syntax with CSS custom properties

4. You wrote this Svelte style block:

<style lang="scss">
$color: red
.button { color: $color; }
</style>

But your app fails to compile. What is the likely cause?

medium

A. Missing semicolon after '$color: red' declaration

B. lang attribute should be 'sass' instead of 'scss'

C. Variables are not supported in Svelte styles

D. You must import SCSS files separately, not inline

Solution

1. Step 1: Check SCSS syntax in style block

   The variable declaration $color: red is missing a semicolon at the end, which is required in SCSS.

2. Step 2: Understand SCSS syntax rules

   SCSS requires semicolons after declarations. Missing it causes a compile error.

3. Final Answer:

   Missing semicolon after '$color: red' declaration -> Option A

4. Quick Check:

   SCSS needs semicolons after declarations [OK]

Hint: Check for missing semicolons in SCSS declarations [OK]

Common Mistakes:

• Using 'sass' instead of 'scss' without changing syntax
• Thinking variables are unsupported in Svelte styles
• Assuming SCSS must be imported, not inline

5. You want to use both SCSS variables and PostCSS autoprefixer in a Svelte project. Which setup correctly enables both preprocessors?

hard

A. Use lang="scss" and import PostCSS in the script block

B. Add lang="scss postcss" to the <style> tag

C. Configure svelte.config.js with svelte-preprocess using both scss and postcss options

D. Write SCSS and PostCSS code in separate <style> tags without lang attributes

Solution

1. Step 1: Understand how to enable multiple preprocessors in Svelte

   Svelte uses svelte-preprocess configured in svelte.config.js to handle multiple preprocessors like SCSS and PostCSS together.

2. Step 2: Identify correct configuration method

   You must configure svelte-preprocess with both scss and postcss options in svelte.config.js. Adding multiple lang attributes or importing PostCSS in script won't work.

3. Final Answer:

   Configure svelte.config.js with svelte-preprocess using both scss and postcss options -> Option C

4. Quick Check:

   Use svelte-preprocess config for multiple preprocessors [OK]

Hint: Use svelte-preprocess config for SCSS and PostCSS [OK]

Common Mistakes:

• Trying to add multiple lang attributes in style tag
• Importing PostCSS in script block instead of config
• Using separate style tags without lang attributes