Utilice Sass para implementar escritura de estilo y extracción global en proyectos Vue 3 + Vite

Introducción:
en proyectos Vue 3 + Vite, el uso del preprocesador Sass puede mejorar en gran medida la eficiencia y la capacidad de mantenimiento de la escritura de estilo. Este blog presentará cómo usar la sintaxis de Sass para escribir estilos en un proyecto Vue 3 + Vite y cómo extraer estilos de Sass al mundo global.

Tabla de contenido:

1. ¿Qué es el descaro?
2. Configuración de Sass en el proyecto Vue 3 + Vite
3. Conceptos básicos de sintaxis de Sass
4. Usando estilos Sass en componentes Vue
5. Extraiga estilos Sass al global
6. Consejos comunes para el código Sass global

texto:

1. Qué es Sass
   Sass (Syntactically Awesome Style Sheets) es un preprocesador de CSS maduro que amplía la funcionalidad de CSS y proporciona más herramientas de escritura de estilo y sintaxis. Sass permite a los desarrolladores utilizar reglas anidadas, variables, mezcladores y otras funciones para escribir código de estilo más conciso y fácil de mantener.

2. Configurar Sass en un proyecto Vue 3 + Vite
   Usar Sass en un proyecto Vue 3 + Vite es muy simple. Primero, asegúrese de haber instalado las dependencias relevantes. Se puede instalar con el siguiente comando:

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

Una vez completada la instalación, busque el archivo vite.config.js en el directorio raíz del proyecto y agregue la siguiente configuración:

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

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

En la configuración anterior, introducimos un archivo Sass global a través de css.preprocessorOptions.scss.additionalData, y podemos definir algunas variables globales y mezcladores en este archivo.

3. Conceptos básicos de sintaxis de Sass
   Sass proporciona muchas funciones de sintaxis potentes. Aquí se muestran algunas de las más utilizadas:

• Reglas de anidamiento: puede anidar un selector dentro de otro selector para reducir el código duplicado.

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

• Variables: puede definir y utilizar variables para facilitar la reutilización de valores en los estilos.

$primary-color: #007bff;

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

• Mezclador: similar a una función, puede definir un fragmento de código de estilo reutilizable.

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

.container {
  @include flex-center;
}

4. Usar estilos Sass en componentes Vue
   Usar estilos Sass en componentes Vue es muy simple, solo agregue el archivo de estilo

.cssSimplemente cambie la extensión de a .scsso .sass. En la etiqueta del componente de archivo único de Vue <style>, use el atributo lang para especificar el idioma utilizado.

<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. Extraiga estilos de Sass al global
   Para compartir algún código de estilo entre múltiples componentes, podemos extraer estilos de Sass al global. En el archivo de configuración vite.config.js anterior, hemos introducido un archivo Sass global, por ejemplo variables.scss. En este archivo, puede definir algunas variables y mezcladores de estilo global.

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

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

Luego, en los componentes que necesitan usar estos estilos globales, simplemente use @importel archivo de estilo global que se introducirá.

<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. Consejos comunes para el código Sass global

• Defina variables de estilo globales, como color, tamaño de fuente, etc., para un uso consistente en todo el proyecto.
• Defina algunos mezcladores de estilos comunes, como diseño, animación, etc., para reutilizarlos en múltiples componentes.
• Utilice reglas anidadas para reducir el código duplicado y mejorar la legibilidad y el mantenimiento del estilo.
• Utilice funciones y operadores de Sass para calcular estilos y generar estilos dinámicamente.

Conclusión:
el uso de Sass en proyectos Vue 3 + Vite puede ayudar a los desarrolladores a escribir y mantener código de estilo de manera más eficiente. Este blog presenta cómo configurar Sass en un proyecto de Vue y el uso básico de la sintaxis de Sass. Al mismo tiempo, también proporciona métodos sobre cómo extraer estilos Sass globalmente y usarlos, así como técnicas comunes para el código Sass global. ¡Espero que este contenido te ayude a usar Sass en tus proyectos de Vue 3 + Vite!