Entrada Less

CSS Compilado

¿Qué es Less a CSS?

Los navegadores entienden CSS, no la sintaxis de Less. Este convertidor transforma tu código Less en CSS estándar para que puedas usar variables, anidamiento y patrones de estilos reutilizables mientras sigues enviando salida compatible con navegadores.

Úsalo cuando quieras compilación rápida sin configurar un pipeline de compilación. Todo se ejecuta localmente en tu navegador, por lo que tu código permanece privado y la conversión es instantánea.

Cómo usar el Convertidor de Less a CSS

Sigue estos pasos para compilar Less a CSS compatible con navegadores. Cada paso utiliza los botones y paneles reales de esta página.

Pegar, subir o cargar ejemplo

Pega Less en el panel izquierdo de Entrada Less, o haz clic en Subir para cargar un archivo .less. Haz clic en Ejemplo para ver estilos de tarjeta de suscriptor con variables y mixins. Ejemplo de entrada Less:

@primary: #2563eb;
@spacing: 12px;
.subscriber-card {
  padding: @spacing;
  .plan-badge { color: @primary; font-weight: 700; }
  &:hover { background: #eef2ff; }
}

Ver CSS compilado

El panel derecho de CSS Compilado muestra la salida instantáneamente. Las variables se resuelven, el anidamiento se aplana, los mixins se expanden.

Copiar o descargar

Haz clic en Copiar para copiar al portapapeles, o Descargar para guardar como .css. Usa Limpiar para empezar de nuevo. Toda la compilación se ejecuta en tu navegador.

Herramientas CSS relacionadas

La compilación es generalmente un paso en un flujo de trabajo de estilos. También podrías necesitar: