Home | Clases | Sass y SCSS | Evaluación Bloque 2

Evaluación Bloque 2


Cuestiones Bloque 2

Responde correctamente a las siguientes preguntas:

  • El anidamiento o nesting en SCSS/Sass:

    • Permite anidar los estilos que correspondan a elementos hijos dentro de los estilos de sus padres.

    • Solo se puede usar en SCSS pero no en Sass.

    • Solo se puede usar en Sass pero no en SCSS.

    • Ninguna de las anteriores.


  • La expresión de SCSS .alert { &:hover { font-weight: bold; } }

    • Añade el estilo a la pseudo-clase hover del selector exterior .alert.

    • No es una expresión válida.

    • Es lo que se conoce como un parent selector.

    • a y c son correctas.


  • Los comentarios multi-línea:

    • Empiezan con /* y terminan */, aunque en Sass no es necesario cerrarlos.

    • Por defecto aparecerán en el CSS compilado.

    • También son llamados loud comments.

    • Todas las anteriores son ciertas.


  • ¿Qué carácter utilizamos para crear un selector placeholder?

    • &.

    • %.

    • $.

    • @.


  • Las variables $font_size y $font-size:

    • Harán referencia a la misma variable.

    • Harán referencia a variables diferentes.

    • El uso de _ no está permitido al nombrar variables.

    • El uso de - no está permitido al nombrar variables.


  • ¿Es posible modificar una variable global dentro de un bloque o ámbito local?

    • Si, mediante la expresión $variable nuevo_valor.

    • Si, mediante la expresión $variable global nuevo_valor.

    • No.

    • Si, mediante la expresión $variable nuevo_valor !global.


  • ¿Cuál es la precisión en dígitos decimales de los números en Sass/SCSS?

    • 8 en coma fija, 24 en coma flotante.

    • 8.

    • 10.

    • 100.



Ejercicio 2

Utilizando como plantilla el código html propuesto al final:


  • Crea un nuevo proyecto llamado ejercicio-2 y añade el archivo index.html con el código proporcionado.

  • Abre en el navegador la ruta del archivo index.html y comprueba que funciona correctamente.

  • Crea las carpetas css e img.

  • Decide si vas a utilizar Sass o SCSS.

  • Crea, dentro del carpeta css, el fichero style.scss (o style.sass, según tu elección, yo a partir de ahora usare SCSS).

  • Modifica la configuración de tu IDE o los comandos en la consola para compilar automáticamente el fichero style.scss en el fichero style.css (recuerda que ambos estarán en la misma carpeta y que style.css se creará en la primera compilación).

  • Si quieres aprovechar bien el ejercicio, no debes escribir nada en el archivo style.css, todo el código de dicho archivo se compilará a partir del fichero style.scss. Además, no puedes utilizar directivas de tipo @, salvo @import para la fuente de Google.

  • Accede a Google Fonts e importa la fuente Nunito en sus variantes light 300, regular 400 y bold 700 dentro del archivo style.scss.

  • Enlaza el archivo style.css en tu archivo index.html.

  • Modifica tu hoja de estilos para que la página y las fuentes cumplan los siguientes requisitos (intenta utilizar todo lo aprendido hasta ahora para optimizar tu hoja de estilos):

    • Ajusta la página a un ancho máximo de 1400px sin márgenes y céntrala en la ventana del navegador

    • La fuente en toda la página será Nunito y la alternativa será sans-serif.

    • La fuente del cuerpo de la página tendrá un peso de 400 con un tamaño de 1rem.

    • La fuente de los titulares (h1 a h3) llevará un peso de 700 y su tamaño será mayor que el cuerpo en cada paso (un 50% más para h3, un 100% mas para h2, un 200% mas para h1)

  • En este punto, al refrescar tu página deberías ver los cambios en las fuentes. Si no es así, revisa la configuración y los estilos antes de continuar.

  • Modifica tu hoja de estilos para que el header cumpla los siguientes requisitos

    • El logo de Sass (que puedes descargar de su página web en svg), debe ir alineado a la izquierda ocupando el 10% del ancho del header.

    • El título de la página debe aparecer centrado en el espacio restante del header, y el subtítulo debajo y también centrado.

    • Pinchando en la imagen o en el título la página se debe recargar, pero el título no debe parecer un enlace (de hecho, ningún enlace de la página debe parecerlo).

    • Resetea los márgenes de los títulos del header.

    • Añade al header un color de fondo y un pequeño padding a los cuatro lados.


  • Modifica tu hoja de estilos para que el nav cumpla los siguientes requisitos:

    • El nav ocupará todo el ancho disponible, tendrá el mismo color de fondo y estará levemente separado del header.

    • Los ítems de menú deben estar en línea y centrados en pantalla, sin margin y con un mínimo padding entre ellos.

    • Los ítems de menú estarán en mayúsculas, con un tamaño de letra del 110% respecto del cuerpo, un peso de 400 y uno de 700 on hover.

    • El color de los ítems y los enlaces será negro, salvo en los enlaces on hover que será rojo.


  • Aplica a la section una altura mínima de 20em para separarla y que se diferencie del footer. Ya trabajaremos con ella en el tercer bloque.

  • Modifica tu hoja de estilos para que el footer cumpla los siguientes requisitos:

    • Las dos secciones del footer (div y p) tendrán el mismo color de fondo y estarán separadas levemente.

    • Descárgate los iconos de las redes sociales en svg de ESTA DIRECCIÓN.

    • Asócialos con sus correspondientes enlaces en el html.

    • Los iconos del footer tendrán un ancho de 3em, estarán centrados y en línea, con una cierta separación entre ellos.

    • La letra del párrafo p será un 80% respecto de la del cuerpo.


  • Extra: Haz una copia del ejercicio, añádele Bootstrap 4 y crea un menú con sub-niveles y sus estilos necesarios.

Archivo index.html de ejemplo:


<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<!-- añade aquí el logo de Sass -->
<h1>Ejercicio 2</h1>
<h2>Plantilla simple Sass / SCSS</h2>
</header>
<nav>
<ul>
<li>
Ítem 1
</li>
<li>
<a href="">Ítem 2</a>
</li>
<li>
<a href="">Ítem 3</a>
</li>
<li>
<a href="">Ítem 4</a>
</li>
<li>
<a href="">Ítem 5</a>
</li>
</ul>
</nav>
<section>
<!-- Esta parte la rellenaremos en el tercer bloque -->
</section>
<footer>
<div>
<a href="https://www.facebook.com">
<!-- añade aquí el icono de Facebook -->
</a>
<a href="https://www.twitter.com">
<!-- añade aquí el icono de Twitter -->
</a>
<a href="https://www.youtube.com">
<!-- añade aquí el icono de YouTube -->
</a>
<a href="https://www.linkedin.com">
<!-- añade aquí el icono de LinkedIn -->
</a>
<a href="https://www.instagram.com">
<!-- añade aquí el icono de Instagram -->
</a>
<a href="https://www.pinterest.com">
<!-- añade aquí el icono de Pinterest -->
</a>
</div>
<!-- cambia estos datos por otros tuyos -->
<p>©2019. <a href="https://www.jairogarciarincon.com">jairogarciarincon</a>.</p>
</footer>
</body>
</html>


Se adjunta una imagen de cómo podría ser la solución a nivel visual:


Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos