Use Sass to implement style writing and global extraction in Vue 3 + Vite projects

Introduction:
In Vue 3 + Vite projects, using the Sass preprocessor can greatly improve the efficiency and maintainability of style writing. This blog will introduce how to use Sass syntax to write styles in a Vue 3 + Vite project, and how to extract Sass styles into the global world.

Table of contents:

1. What is Sass
2. Configuring Sass in Vue 3 + Vite project
3. Sass syntax basics
4. Using Sass styles in Vue components
5. Extract Sass styles to the global
6. Common tips for global Sass code

text:

1. What is Sass
   Sass (Syntactically Awesome Style Sheets) is a mature CSS preprocessor that extends the functionality of CSS and provides more style writing tools and syntax. Sass allows developers to use nested rules, variables, mixers and other functions to write more concise and maintainable style code.

2. Configuring Sass in a Vue 3 + Vite project
   Using Sass in a Vue 3 + Vite project is very simple. First, make sure you have installed the relevant dependencies. It can be installed with the following command:

npm install -D sass
npm install -D sass-loader

After the installation is complete, find the vite.config.js file in the root directory of the project and add the following configuration:

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

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

In the above configuration, we introduce a global Sass file through css.preprocessorOptions.scss.additionalData, and we can define some global variables and mixers in this file.

3. Sass syntax basics
   Sass provides many powerful syntax features. Here are a few commonly used ones:

• Nesting rules: You can nest one selector within another selector to reduce duplicate code.

.container {
  width: 100%;
  
  .title {
    font-size: 20px;
  }
}

• Variables: You can define and use variables to facilitate reusing values ​​in styles.

$primary-color: #007bff;

.button {
  background-color: $primary-color;
}

• Mixer: Similar to a function, you can define a piece of reusable style code.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

4. Using Sass styles in Vue components
   Using Sass styles in Vue components is very simple, just add the style file

.cssJust change the extension from to .scssor .sass. In the tag of the Vue single-file component <style>, use the lang attribute to specify the language used.

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3 + Vite + Sass!</h1>
  </div>
</template>

<style lang="scss">
.container {
  width: 100%;

  .title {
    font-size: 20px;
  }
}
</style>

5. Extract Sass styles to the global
   In order to share some style code among multiple components, we can extract Sass styles to the global. In the vite.config.js configuration file above, we have introduced a global Sass file, for example variables.scss. In this file, you can define some global style variables and mixers.

// variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size: 16px;

// mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Then, in the components that need to use these global styles, just use @importthe global style file to be introduced.

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3 + Vite + Sass!</h1>
    <button class="button">Click me</button>
  </div>
</template>

<style lang="scss">
@import "./styles/variables.scss";
@import "./styles/mixins.scss";

.container {
  width: 100%;

  .title {
    font-size: $font-size;
  }

  .button {
    @include flex-center;
    background-color: $primary-color;
    color: $secondary-color;
    font-size: $font-size;
  }
}
</style>

6. Common tips for global Sass code

• Define global style variables, such as color, font size, etc., for consistent use throughout the entire project.
• Define some common style mixers, such as layout, animation, etc., for reuse in multiple components.
• Use nested rules to reduce duplicate code and improve style readability and maintainability.
• Use Sass functions and operators to calculate styles and dynamically generate styles.

Conclusion:
Using Sass in Vue 3 + Vite projects can help developers write and maintain style code more efficiently. This blog introduces how to configure Sass in a Vue project and the basic usage of Sass syntax. At the same time, it also provides methods on how to extract Sass styles globally and use them, as well as common techniques for global Sass code. I hope this content helps you use Sass in your Vue 3 + Vite projects!