Introduction
SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable.
How to Import SASS in Nuxt
To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager.
$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev
Component File Styling
With SASS and sass-loader installed in our project, we can now write SCSS in our component file.
Lets see an example:
<!-- src/components/button/button.vue -->
<template>
<button
class="app-button"
>
<slot></slot>
</button>
</template>
<style lang="scss">
.app-button {
position: relative;
display: inline-flex;
cursor: pointer;
text-align: center;
white-space: nowrap;
align-items: center;
justify-content: center;
vertical-align: top;
text-decoration: none;
outline: none;
// variant
&--primary {
background-color: #0e34cd;
color: #ffffff;
}
}
</style>
In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component.
Global File Import and Variables
To import SCSS files that are global, like variables and mixins files, we need to install style-resources:
$ yarn add @nuxtjs/style-resources --dev
# or
$ npm install @nuxtjs/style-resources --save-dev
Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules.
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'@nuxtjs/style-resources',
],
Next, let's create a global variables.scss file in our assets/style folder.
Add a single variable inside:
// assets/style/variables.scss
$primary: #010933;
$white: #fff;
Next, we need to import this file inside the nuxt.config file:
styleResources: {
scss: [
'~/assets/style/variables.scss',
],
},
Now we have the variables in our variables.scss available in all our components for use.
Next, let's test it out by updating our button component.
<!-- src/components/button/button.vue -->
<template>
<button
class="app-button"
>
<slot></slot>
</button>
</template>
<style lang="scss">
.app-button {
position: relative;
display: inline-flex;
cursor: pointer;
text-align: center;
white-space: nowrap;
align-items: center;
justify-content: center;
vertical-align: top;
text-decoration: none;
outline: none;
// variant
&--primary {
background-color: $primary;
color: $white;
}
}
</style>
We have updated our button variant color to be our global SCSS variable ($primary and $white).
Mixins
Mixins in SASS are used to write styles that can be reused in other parts of the code.
Let's create a sample mixin to center an item.
// assets/style/mixins.scss
@mixin center-item {
text-align: center;
align-items: center;
justify-content: center;
}
Next, we need to import our mixin in Nuxt config:
styleResources: {
scss: [
'~/assets/style/variables.scss',
'~/assets/style/mixins.scss'
],
},
Now, let's update our button component with our mixin:
<!-- src/components/button/button.vue -->
<template>
<button
class="app-button"
>
<slot></slot>
</button>
</template>
<style lang="scss">
.app-button {
position: relative;
display: inline-flex;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
text-decoration: none;
outline: none;
@include center-item;
// variant
&--primary {
background-color: $primary;
color: $white;
}
}
</style>
Functions
Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code.
Let's create a function to handle a media query for our application.
// assets/style/functions.scss
// Get the difference between 2 numbers.
@function minus($param1, $param2) {
@return $param1 - $param2;
}
// Get the sum of 2 numbers.
@function add($param1, $param2) {
@return $param1 + $param2;
}
This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done.
Let's import our mixin in Nuxt config:
styleResources: {
scss: [
'~/assets/style/variables.scss',
'~/assets/style/mixins.scss',
'~/assets/style/functions.scss'
],
},
Let's update our button component with our function:
<!-- src/components/button/button.vue -->
<template>
<button
class="app-button"
>
<slot></slot>
</button>
</template>
<style lang="scss">
.app-button {
position: relative;
display: inline-flex;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
text-decoration: none;
outline: none;
@include center-item;
width: minus(30px, 100%);
// variant
&--primary {
background-color: $primary;
color: $white;
}
}
</style>
We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner.
I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github.
