Codifica tu web Astro.build más rápido con Stylify CSS

Codifica tu sitio web Astro.build más rápido con Stylify CSS. Utiliza utilidades similares a CSS. No estudies CSS framework

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

Estiliza tu sitio web Astro.build rápida y fácilmente con Stylify CSS utilidades similares a CSS.

Introducción

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 probarlo!

Instalación

Instala Stylify usando CLI:

yarn add @stylify/astro

Añade un buildModule en el astro.config.mjs:

import { defineConfig } from 'astro/config';
import stylify from '@stylify/astro';

export default defineConfig({
	integrations: [stylify()]
});

Uso

La sintaxis de Stylify es similar a la de CSS. Sólo tienes que escribir _ en lugar de un espacio y ^ en lugar de una comilla.

Así que si editamos el src/pages/index.astro:

<h1 class="font-size:24px margin:12px_24px">
	¡¡¡Hola Mundo!!!
</h1>

En producción, obtendrás CSS optimizado y HTML destrozado:

<h1 class="a b">¡Hola Mundo!</h1>

.a{font-size: 24px}
.b{margin: 12px 24px}

Stackblitz Playground

Adelante y prueba Stylify CSS + Astro.build en Stackblitz.

Configuración

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

• Definir componentes
• Añadir selectores personalizados
• Configura tus macros como ml:20px para margin-left
• Define pantallas personalizadas
• Puedes mapear archivos anidados en la plantilla
• Y mucho más

No dudes en consultar la documentación para aprender más 💎.