El contenido a publicar debe seguir las normas de contenido caso contrario se procederá a eliminar y suspender la cuenta.
¿Quiénes pueden ver este post?
Selecciona los planes que van a tener acceso
La magia de los Preprocesadores - Aprende SASS Nivel I: lección 1
Cargando imagen
1-Para utilizar Sass en una página HTML5 que estará en línea, no necesitas instalar Sass en tu computadora.
2-En su lugar, puedes utilizar un CDN (Content Delivery Network) que proporcione los archivos necesarios de Sass.
3-Hay varios CDNs de Sass disponibles, como unpkg o jsdelivr.
Aquí te muestro cómo puedes utilizar unpkg:
En la sección <head> de tu archivo HTML5, agrega el siguiente código para incluir el archivo de Sass:
html code
<head>
...
<link rel="stylesheet" href="https://unpkg.com/sass.js/dist/sass.min.js">;
...
</head>
-Agrega tu código Sass dentro de un bloque de script.
Por ejemplo:
html code
<body>
<script type="text/x-sass">
$primary-color: #007bff;
body {
background-color: $primary-color;
}
</script>
</body>
En este ejemplo, $primary-color es una variable de Sass que se establece en #007bff.
Luego, se utiliza en la regla CSS para el color de fondo del cuerpo del documento.
-Agrega el siguiente código JavaScript al final de tu archivo HTML5 para compilar el código Sass en CSS:
html code
<body>
...
<script>
window.addEventListener('DOMContentLoaded', function() {
sass.compile(document.querySelector('script[type="text/x-sass"]').innerText.trim(), function(result) {
var style = document.createElement('style');
style.textContent = result.text;
document.head.appendChild(style);
});
});
</script>
</body>
Este código utiliza el objeto sass proporcionado por el archivo Sass.js que se incluyó en el paso 1 para compilar el código Sass en CSS.
La función sass.compile toma el contenido del bloque de script de Sass en el documento y lo compila en CSS.
Luego, crea una etiqueta de estilo con el contenido CSS compilado y lo agrega al <head> del documento.
Con estos pasos, puedes utilizar Sass en tu página HTML5 en línea sin tener que instalar nada en tu computadora.
Sin embargo, ten en cuenta que el rendimiento puede ser mas lento debido a la compilación en tiempo de ejecución de Sass.
Por lo tanto, los profesionales generalmente compilan su código Sass en CSS antes de implementarlo en producción (por ello no usan el cdn sino un que instaloan un compilador Sass en sus compuradoras.).
Ahora bien, existe una opción para lograr buen rendimiento profesional y no tener que descargar un paquete SASS y realizar al compilación en tu dispositivo.:
¿Se puede usar un compilador SASS online y luego incluyo ese SASS compilado a mi página html5?
Sí, es posible usar un compilador Sass en línea y luego incluir el Sass compilado en tu página HTML5.
Hay varias herramientas en línea que ofrecen servicios de compilación Sass:
SassMeister
CodePen
Sass.js
1-Para usar un compilador Sass en línea, primero deberás escribir tu código Sass en un editor de texto o en la herramienta en línea.
2-Luego, deberás compilar el código Sass en CSS.
3-Una vez que tengas el archivo CSS compilado, puedes vincularlo a tu página HTML5 como lo harías con cualquier archivo CSS.
Ejemplo de cómo vincular un archivo CSS compilado de Sass a una página HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi página Sass</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esta es mi página Sass</p>
</body>
</html>
En este ejemplo, el archivo "estilos.css" es el archivo CSS compilado de Sass que se vincula a la página HTML5.
(Asegúrate de reemplazar "estilos.css" con el nombre de tu propio archivo CSS compilado).
Fuente: Andre Michelle Messi - 2023
Ver más
Compartir
Creando imagen...
¿Estás seguro que quieres borrar este post?
Debes iniciar sesión o registrarte para comprar un plan
Invitame un Cafecito, por favor.
