Project Setup

Initialize a Vue 3 project with Vite and add the Sass preprocessor dependency:

npm install sass -D

Configuring Global Variables

To make SCSS variables available across all components without explicit imports, configure the additionalData option in vite.config.js. This injects the content of a global file into every style block.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/styles/variables" as *;`
      }
    }
  }
})

Define the variables in the referenced file:

// src/styles/_variables.scss
$primary-accent: rgb(70, 227, 238);

Utilize the global variable within a component:

<template>
  <div class="container">
    <p>This container uses the global primary accent color.</p>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: grid;
  place-items: center;
  background-color: $primary-accent;
  padding: 2rem;
  border-radius: 8px;
}
</style>

Importing Partial Stylesheets

For component-specific styles, import local SCSS files direct into the style block.

// src/styles/partials/_mixins.scss
$highlight: darkblue;

.card {
  padding: 1.5rem;
  border: 1px solid #eee;

  .active {
    font-weight: bold;
    color: $highlight;
  }
}

Apply the imported styles:

<template>
  <div class="card">
    <span class="active">Nested rules and local variables in action.</span>
  </div>
</template>

<style lang="scss" scoped>
@import './styles/partials/mixins';
</style>

Selector Combinators and Parent Reference

SCSS provides powerful tools for manipulating selectors, such as the parent reference & and sibling combinators.

// src/styles/partials/_combos.scss
.wrapper {
  margin: 1rem 0;
  padding: 1rem;
  background: $primary-accent;

  .trigger {
    color: navy;
    // Parent reference for pseudo-classes
    &:hover {
      color: teal;
    }
  }

  // Direct child selector
  .parent > .child {
    color: cornflowerblue;
  }

  // Adjacent sibling selector
  .first + .second {
    color: darkslateblue;
  }

  // General sibling selector
  .base ~ .sibling {
    color: dimgrey;
  }
}

Example usage in the template:

<template>
  <div class="wrapper">
    <div class="trigger">Hover over me (Parent Reference)</div>
  </div>
  <div class="wrapper">
    <div class="parent">
      <div class="child">Direct Child (&gt;) Example</div>
    </div>
  </div>
  <div class="wrapper">
    <div class="first">First block</div>
    <div class="second">Adjacent Sibling (+)</div>
  </div>
  <div class="wrapper">
    <div class="base">Base block</div>
    <div>Sibling 1</div>
    <div class="sibling">General Sibling (~)</div>
    <div class="sibling">General Sibling (~)</div>
  </div>
</template>

<style lang="scss" scoped>
@import './styles/partials/combos';
</style>

Grouping Selectors

Aply the same property set to multiple selectors simultaneously using comas.

// src/styles/partials/_groups.scss
.content {
  padding: 1rem;

  .group-a,
  .group-b,
  .group-c {
    text-align: center;
    color: hotpink;
    margin: 0.5rem 0;
  }
}

<template>
  <div class="content">
    <div class="group-a">Item A</div>
    <div class="group-b">Item B</div>
    <div class="group-c">Item C</div>
  </div>
</template>

<style lang="scss" scoped>
@import './styles/partials/groups';
</style>