🚀 Dale estilo a tu web Vue más rápido con Stylify CSS

Dale estilo a tu web Vue de forma más rápida e intuitiva con Stylify

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

Stylify + Vue + Vite. Estiliza tu sitio web Vue más rápido con Stylify. No estudies selectores, sintaxis y documentación. Usa sintaxis CSS pura y obtén CSS generado con optimización avanzada para producción.

Para un comienzo más fácil, puedes revisar el Stylify Stackblitz playground 🎮.

💎 Introducción a Stylify CSS

Stylify es una biblioteca que utiliza selectores similares a CSS para generar CSS optimizado basado en lo que escribes.

• ✅ Selectores similares a CSS
• ✅ Sin framework que estudiar
• ✅ Menos tiempo dedicado a la documentación
• ✅ CSS manoseado y extremadamente pequeño
• ✅ No es necesario purgar CSS
• ✅ Componentes, variables, selectores personalizados
• ✅ Puede generar múltiples paquetes de CSS

También tenemos una página sobre ¡qué problemas resuelve Stylify CSS y por qué deberías darle una oportunidad!

🚀 Configuración de Vue.js

La forma más fácil de Setup el Vue está utilizando CLI:

• Ejecutar yarn create vite app
• Selecciona vue.
• Luego cd app

De esta manera obtendrás el esqueleto de la aplicación Vue por defecto.

🔌 Integración CSS de Stylify

Instala el paquete @stylify/unplugin usando NPM o Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Abre el archivo vite.config.js y copia el siguiente contenido en él:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [
		{
			files: ['./src/**/*.vue'],
			outputFile: './src/assets/stylify.css',
		},
	]
});

export default defineConfig(() => ({
	plugins: [stylifyPlugin, vue()]
}));

En el último paso, abre src/main.js y añade la ruta a stylify.css:

// ...
import './stylify.css'

Estilizar la web

¡Si copias el código de abajo en src/App.vue y ejecutas yarn dev obtendrás un Hello World! 🎉 texto:

<template>
	<div class="max-width:800px margin:0_auto">
		<h1 class="text-align:center margin-top:100px font-size:42px">¡Hola Mundo!🤩</h1>
	</div>
</template>

Stylify observa cualquier cambio en los archivos que coincide con la máscara en los archivos del paquete y genera CSS en el src/stylify.css.

Si añades por ejemplo color:blue, el CSS se actualizará automáticamente 🎉.

Adelante y prueba Stylify CSS directamente en Stackblitz.com 💡.

Componentes

Para evitar plantillas hinchadas con utilidades, puedes usar componentes directamente en los archivos, donde se utilizan a través de opciones de contenido (espera objeto javascript sin corchetes) o en el compilador config.

<!--
stylify-components
	container: 'max-width:800px margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
-->
<template>
	<div class="container">
		<h1 class="title">¡Hola Mundo!🤩</h1>
	</div>
</template>

Variables

Si te gusta el código limpio, también quieres evitar los valores hardcodeados en los selectores. Las Variables se pueden definir de la misma manera que los componentes:

<!--
stylify-variables
	titleFontSize: '42px',
	containerWidth: '800px'
/stylify-variables

stylify-components
	container: 'max-width:$containerWidth margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
-->
<template>
	<div class="container">
		<h1 class="title">¡Hola Mundo!🤩</h1>
	</div>
</template>

Construir para producción

Si ejecutas yarn build + yarn preview, el marcado de vue se convertirá en esto:

<template>
	<div class="a">
		<h1 class="d">¡Hola Mundo!🤩</h1>
	</div>
</template>

El CSS también se acorta:

:root {--titleFontSize: 42px;--containerWidth: 800px;}
.b,.a{max-width:800px}
.c,.a{margin:0 auto}
.f,.d{text-align:center}
.e,.d{margin-top:100px}
.g,.d{font-size:42px}

Configura todo lo que necesites

Los ejemplos anteriores no incluyen todo lo que Stylify CSS puede hacer:

• Puedes mapear archivos anidados en la plantilla
• Estilizar selectores globales
• Definir pantallas personalizadas
• Añade tus macros como ml:20px para margin-left
• Y mucho más

Siéntete libre de revisar la documentación para aprender más 💎.