Svelte: Styling

Overview

Styling is a crucial aspect of web development, and Svelte provides several ways to apply styles to your components. In this article, we’ll explore scoped styles, global styles, and how to work with CSS preprocessors in Svelte.

Scoped Styles

By default, styles defined in a Svelte component are scoped to that component. This means the styles will not affect other components, preventing unwanted side effects.

Example: Scoped Styles

<style>
  h1 {
    color: blue;
  }
</style>

<h1>Hello, Svelte!</h1>

Explanation:

The <style> block defines styles that are scoped to the current component, ensuring that the h1 element will only be styled within this component.

Global Styles

If you need styles to apply globally across your application, you can define global styles using a <style> block with the :global selector.

Example: Global Styles

<style>
  :global(h1) {
    color: red;
  }
</style>

<h1>This will be red in all components!</h1>

Explanation:

The :global selector allows you to apply styles globally, meaning that any h1 element in your application will be styled red.

Using CSS Preprocessors

Svelte supports CSS preprocessors like SCSS, LESS, and PostCSS, which allow for advanced styling features. To use a preprocessor, you need to install the corresponding package and configure your project.

Example: Using SCSS

1. Install SCSS:

    npm install -D svelte-preprocess sass
   

2. Configure Preprocessing: Update your svelte.config.js file.

    import sveltePreprocess from 'svelte-preprocess';
   
    export default {
      preprocess: sveltePreprocess({
        scss: {
          includePaths: ['src'],
        },
      }),
    };
   

3. Using SCSS in a Component:

<style lang="scss">
  $primary-color: blue;

  h1 {
    color: $primary-color;
  }
</style>

<h1>Styled with SCSS!</h1>

CSS Modules

Svelte also allows the use of CSS Modules, which provide a way to scope CSS to specific components using local identifiers. This prevents name collisions and promotes modular styles.

Example: Using CSS Modules

1. Create a CSS Module: Create a file named Component.module.css.

    .heading {
      color: green;
    }
   

2. Import the CSS Module in Your Component:

<script>
  import styles from './Component.module.css';
</script>

<h1 class={styles.heading}>This heading is green!</h1>

Responsive Styling

Svelte makes it easy to create responsive designs by leveraging CSS media queries directly within your component styles.

Example: Responsive Styles

<style>
  h1 {
    color: blue;
  }

  @media (max-width: 600px) {
    h1 {
      color: red;
    }
  }
</style>

<h1>Responsive Heading</h1>

Explanation:

In this example, the heading color changes based on the screen width, demonstrating how to implement responsive design in Svelte.