CSS

Inside of our +page.svelte file we are displaying each item in our products array, which we created in the last module. Let’s say that we want to make the background of every <div> orange. We can do that by adding a <style> tag and then writing our CSS within it. Let’s go ahead and add the following to our code.

<script>
  let products = [
    { name: 't-shirt', quantity: 10 },
    { name: 'mug', quantity: 30 },
    { name: 'sticker', quantity: 8 },
    { name: 'sweatshirt', quantity: 12 },
  ];
</script>
 
{#each products as product, i (product.name)}
<div>{product.name}</div>
<div>Index: {i}</div>
{/each}
 
<style>
  div {
    background-color: orange;
  }
</style>

Now, the background of each <div> is orange. Right now we are only working out of one component. Let’s add another component to our project called GridTile.svelte, and within this component add a <div> with the text "This is our GridTile component". Now we can import this component in our index page and add it to our HTML.

Side note: I will cover working with component with SvelteKit in depth in a future video.

Now, the background of our child component’s <div> is not orange. This is because CSS in .svelte files is scoped to that component. This means that any CSS written within a .svelte file will only be applied to that individual component. Our CSS from the +page.svelte file will not be applied to elements in our GridTile.svelte file. This prevents styles from one component affecting other components. You can also delete CSS without having to worry about deleting rules that are used in other parts of your application. In our GridTile.svelte file, let’s change the text and background color as well as add some bottom margin like this:

<style>
  div {
    color: LavenderBlush;
    background-color: HotPink;
    margin-bottom: 12px;
  }
</style>

Once again the CSS within the GridTile component will not affect the styles of the other components. We will not see this pink background in any <div> tags outside of the GridTile component. Now, what if we want to write global CSS, meaning CSS that is applied to every page and component? We can do this by creating a layout file and adding CSS to the layout using the global modifier. I won’t go into layouts in a lot of depth in this module, but there will be a module covering layouts later in this course.

Now create a layout file. We can do this by creating a new file in our routes folder called +layout.svelte. Now, within this file we need to add a <slot/> tag, which again I will explain what this is in a future module. Now, within this layout file we can add a style tag, and any CSS written here with a global modifier will be applied to all of our pages. If we were to add:

<main>
  <slot />
</main>
 
<style>
  :global(div) {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
  }
</style>

The font family and style will be applied to every <div> in all components within the application. We can also write global CSS rules by creating a CSS file and importing it into our layout or app.html file. Let’s remove this CSS from our layout and create a new file called app.css. Within this file we can add any css, and then we can import it into our layout like this:

<script>
  import './app.css';
</script>

Now, the CSS written within our app.css file will be applied to the entire app.

Now we understand that CSS can either be scoped at the page and component level or specified as global in our layout, but how exactly does this work? Behind the scenes, Svelte creates component specific classes when it compiles the code. This keeps the CSS scoped to that specific component and avoids duplicate classes or ID’s. If we inspect these elements in the browser, you’ll see different svelte classes, each with a random string of letters and numbers on the end. Each of these corresponds to an element in a specific component. This means that if you use the ID "container" in one component, you can use the same ID in a different component and the CSS styling will still be scoped. This prevents any leaking of the CSS.

By default, Svelte uses PostCSS which is a tool for transforming CSS with JavaScript. But what if we want to use SASS/SCSS? For example, if we were to try and style our <h3> tags back in the +page.svelt file using SCSS like this, the app will break.

<div>
  This is my text
  <p>Additional Text</p>
</div>
 
<style>
  div {
    h3 {
      color: white;
    }
  }
</style>

This is because Svelte is expecting CSS and this nesting is not valid CSS. There are four things we’ll need to do to use SASS.

1. First is to add lang="scss" in the style tag.
2. Then we’ll need to install svelte-preprocess by running npm install svelte-preprocess in our terminal.
3. After it’s installed, let’s head into our svelte.config.js file and import svelte-preprocess and then add another property below kit, preprocess, that will be set to sveltepreprocess().
4. Finally, we need to install node-sass. This is a Node library that binds Node.JS with LibSass and is necessary to write SASS code. We can install it by running the command npm install --save node-sass, and then restart the server. This is because Svelte is expecting CSS and this nesting is not valid CSS. There are four things we’ll need to do to use Sass.
5. Add lang="scss" in the style tag.
6. Install svelte-preprocess by running npm install svelte-preprocess in our terminal.
7. In svelte.config.js, import svelte-preprocess and then add another property below kit, preprocess, that will be set to sveltepreprocess().
8. Install node-sass. This is a Node.js library that binds Node.js with libsass. We can install it by running the command npm install --save node-sass, and then restarting the dev server.

Our svelte.config.js file should now look like the following.

import adapter from '@sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
 
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
  preprocess: sveltePreprocess(),
};
 
export default config;

Now if you test this in the browser, the SASS is styling the app!

That concludes using CSS with SvelteKit. In the next video, we will go over how to install Tailwind CSS into a SvelteKit project.