How To Use Sass Variables In Next 13 Components
Nov 26 2023
Sass is a popular CSS preprocessor that introduces variables, nesting, and other advanced features. In this article, we will explore how to use Sass variables specifically within Next 13 components.
How To Use SASS/SCSS Variables In Next Components
Sass variables provide a convenient way to store and reuse values throughout your stylesheets.
Let's take a look at a basic example. Suppose we have a Sass file named variables.module.scss
in the app directory, which defines a Sass variable named $primary-color
// app/variables.module.scss
$primary-color: #342356;
:export {
primaryColor: $primary-color;
}
In this example, we're exporting the Sass variable primaryColor using the :export directive. This variable will be accessible in our Next components.
Now that we have our Sass variable defined, let's use it in a Next component. In the app/page.js file, we import the variables object from our variables.module.scss
file and use the primaryColor variable to style an <h1>
element:
// app/page.js
import variables from './variables.module.scss';
export default function Page() {
return <h1 style={{ color: variables.primaryColor }}>Hello World</h1>;
}
Here, we set the color of the
element using the Sass variable primaryColor.
Conclusion
Using Sass variables in your Next.js components is straightforward. Just like exporting JavaScript modules, export variables and import them into components.