How to style components with SCSS in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using SCSS in Vue components provides advanced styling capabilities including variables, mixins, nesting, and modular CSS architecture for maintainable stylesheets.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented SCSS extensively in Vue components for theme systems, component libraries, and responsive design patterns in enterprise applications.
From my expertise, the most effective approach is to use the lang="scss" attribute in Vue style tags.
This method enables full Sass feature support while maintaining Vue’s component-scoped styling and hot reload capabilities during development.
Use lang="scss" attribute in style tags to enable Sass features in Vue components.
<template>
<div class="card">
<h2 class="card__title">{{ title }}</h2>
<p class="card__content">{{ content }}</p>
<button class="btn btn--primary">Action</button>
</div>
</template>
<script setup>
const props = defineProps(['title', 'content'])
</script>
<style lang="scss" scoped>
$primary-color: #007bff;
$border-radius: 8px;
.card {
border-radius: $border-radius;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
&__title {
margin-bottom: 0.5rem;
font-weight: bold;
}
&__content {
color: #666;
}
}
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: $border-radius;
&--primary {
background-color: $primary-color;
color: white;
&:hover {
background-color: darken($primary-color, 10%);
}
}
}
</style>
SCSS in Vue is enabled by adding lang="scss" to style tags, providing access to variables, nesting, mixins, and functions. Use variables with $ syntax for consistent theming, nest selectors for cleaner organization, and leverage Sass functions like darken() for dynamic color manipulation. The scoped attribute still works with SCSS, ensuring styles only apply to the current component. You can import external SCSS files and use partials for shared variables and mixins across components.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for maintainable styling and theme systems.
Create a global _variables.scss file for shared design tokens, use BEM methodology with SCSS nesting for scalable CSS architecture, and leverage mixins for responsive breakpoints and reusable style patterns.
