jairogarcíarincón
15/06/2021
Contenidos
- Introducción a los pre-procesadores
- Instalación
- Configuración
- Evaluación Bloque 1
- Solución Evaluación Bloque 1
- Sintaxis y reglas
- Variables
- Operadores
- Tipos de datos
- Evaluación Bloque 2
- Solución Evaluación Bloque 2
- Ejercicio 1
- Solución Ejercicio 1
- Ejercicio 2
- Solución Ejercicio 2
- Funciones
- Interpolado
- Reglas y directivas básicas
- Directivas de control y heredadas
- Evaluación Bloque 3
- Solución Evaluación Bloque 3
- Ejercicio 3
- Solución Ejercicio 3
- Ejercicio 4
- Solución Ejercicio 4
- Ejercicio 5
- Solución Ejercicio 5
- Ejercicio 6
- Solución Ejercicio 6
- Ejercicio 7
- Solución Ejercicio 7
Crea una nueva carpeta en Visual Studio Code llamada ejercicio-1 con las siguientes características:
- Debe incluir 3 archivos de tipo html llamados index.html, index_sass.html e index_scss.html, similares al index.html que se muestra a continuación y a los que debes cambiar el texto Ejercicio 1 CSS puro por el tipo de CSS utilizado en cada caso (SASS y SCSS, respectivamente).
- Debe incluir tres carpetas llamadas css, sass y scss.
- Dentro de la carpeta css crearemos el archivo style.css.
- Dentro de la carpeta scss crearemos el archivo style_scss.scss.
- Dentro de la carpeta sass crearemos el archivo style_sass.sass.
- Añade los estilos que consideres necesarios a cada archivo correspondiente.
- Cuando guardemos datos en cualquiera de los 2 archivos pre-procesados, comprobarás que se habrán creado archivos asociados en la carpeta correspondiente.
- Referencia a cada html su hoja de estilos css correspondiente.
- Comprueba el resultado de cada html en el navegador.
Archivo index.html de ejemplo para css puro:
Se adjunta una imagen de cómo debería ser la solución el caso de CSS puro (en el resto, a nivel visual solo cambiaría el título):
Publicado el 29 de Mayo de 2023
csscss3sassscsslesspreprocesadores