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

Evaluación Bloque 3


Cuestiones Bloque 3

Responde correctamente a las siguientes preguntas:

  • ¿Cómo puedo averiguar el valor del elemento de índice 3 de una lista de nombre $list?

    • Mediante la función length($list,3)

    • Mediante la función index($list,3)

    • Mediante la función nth($list,3)

    • Ninguna de las anteriores.


  • La expresión @debug comparable(100px, 3in); de SCSS:

    • Devuelve true.

    • Compara si las unidades son compatibles para poder operar con ellas.

    • a y b son correctas.

    • Devuelve false.


  • La función mix(blue,#C00) de SCSS:

    • No es una función de SCSS válida.

    • Permite mezclar dos colores.

    • Permite hacer un degradado entre dos colores.

    • Ninguna de las anteriores.


  • Para importar la hoja de estilo _code.scss dentro de style.scss.

    • En style.scss debo escribir @import ‘code’.

    • En _code.scss debo escribir @export ‘style.

    • a y b son válidas.

    • Ninguna de las anteriores es cierta.


  • Los mixin en Sass/SCSS

    • Se declaran mediante @function y se llaman mediante @mixin.

    • Se declaran mediante @include y se llaman mediante @mixin.

    • Se declaran mediante @mixin y se llaman mediante @include.

    • Ninguna de las anteriores.


  • Las funciones de Sass/SCSS:

    • Permiten definir operaciones complejas para abstraerlas de una manera sencilla.

    • Se definen mediante la directiva @function.

    • Solo pueden contener sentencias universales.

    • Todas las anteriores.


  • Para ampliar una regla de Sass/SCSS:

    • La mejor opción es utilizar @mixin.

    • La mejor opción es utilizar @extend.

    • La mejor opción es utilizar @function.

    • Ninguna de las anteriores.


  • ¿Cuál es la directiva más recomendada para recorrer una lista y emitir estilos o evaluar código en cada uno de sus elementos?

    • @for.

    • @foreach.

    • @while.

    • @each.



Ejercicio 3

  • Partiendo del ejercicio-2, crea una copia en un nuevo proyecto llamado ejercicio-3.

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

  • 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.

  • Cuando lo consideres necesario, utiliza las opciones de @debug, @error y @warn.

  • Traslada todas las variables de la hoja de estilos a una nueva hoja llamada _variables.scss e impórtala en la actual

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

    • El color del título de la página debe venir de una @function escrita en _variables.scss que genere un color aleatorio al compilar de componente rojo (0 en el resto).

    • El color del subtítulo de la página debe venir de una @function escrita en _variables.scss que genere un color aleatorio al compilar de componente verde (0 en el resto).

    • Simplifica las reglas de estilo de fuentes de los títulos mediante un @mixin, @include y @extend.

    • Los estilos de lista horizontal del nav (salvo los enlaces) deben ser reutilizables mediante un @mixin.

  • Modifica tu hoja de estilos para que la section cumpla los siguientes requisitos:

    • Añade 6 article en columnas de 3.

    • Añade a cada article un enlace a la red social (de las del footer), su logo a la izquierda, un título a la derecha y una descripción de la empresa debajo.

    • Cada article tendrá un color de fondo aleatorio, con opacidad de 0.5 y diferente de los otros (puedes utilizar como punto de partida la @function definida anteriormente).

    • El logo del article tendrá un ancho del 25% y el resto del contenido ocupará el espacio restante del article

  • Modifica tu hoja de estilos para adaptarla a diferentes dispositivos:

    • En pantallas de menos de 992px, los articles pasan a columnas de 2, en pantallas de menos de 768px, aparecen uno debajo de otro.

    • En pantallas de menos de 768px, el logo aparece centrado encima del título y el subtítulo.

    • En pantallas de menos de 768px, el margen de separación entre secciones desaparece.

    • En pantallas de menos de 768px, los ítems del nav aparecen uno debajo de otro (quedando así preparados para implementar un menú oculto).

    • En todos los casos, las fuentes e imágenes se adaptan según las necesidades.

  • Modifica la configuración del IDE o del terminal para que el archivo style.css esté comprimido.

  • Extra: Añade un menú oculto en móviles que se despliegue con un botón utilizando Bootstrap o jQuery / Javascript.



Se adjunta el archivo index.html para usar como base:


<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img src="img/sass.svg" alt="Logo Sass">
<h1>Ejercicio 3</h1>
<h2>Plantilla avanzada 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>
<article>
<a href="https://www.facebook.com">
<img src="img/facebook.svg" alt="Facebook">
<div>
<h3>Facebook</h3>
<p>
Facebook, Inc. (pronunciación AFI: [feɪsbʊk]) (NASDAQ: FB) es una compañía estadounidense que
ofrece servicios de redes sociales y medios sociales en línea con sede en Menlo Park, California.
</p>
</div>
</a>
</article>
<article>
<a href="https://www.twitter.com">
<img src="img/twitter.svg" alt="Twitter">
<div>
<h3>Twitter</h3>
<p>
Twitter (pronunciación AFI [ˈtwɪtər]) (NYSE: TWTR) es un servicio de microblogging, con sede en
San Francisco, California, con filiales en San Antonio (Texas) y Boston (Massachusetts).
</p>
</div>
</a>
</article>
<article>
<a href="https://www.youtube.com">
<img src="img/youtube.svg" alt="YouTube">
<div>
<h3>YouTube</h3>
<p>
YouTube (pronunciación AFI [ˈjuːtjuːb]) es un sitio web dedicado a compartir videos. Presenta
una variedad de clips de películas, programas de televisión y vídeos musicales, videoblogs y más.
</p>
</div>
</a>
</article>
<article>
<a href="https://www.linkedin.com">
<img src="img/linkedin.svg" alt="LinkedIn">
<div>
<h3>LinkedIn</h3>
<p>
LinkedIn es una comunidad social orientada a las empresas, a los negocios y el empleo.
La web pone en contacto a millones de empresas y empleados.
</p>
</div>
</a>
</article>
<article>
<a href="https://www.instagram.com">
<img src="img/instagram.svg" alt="Instagram">
<div>
<h3>Instagram</h3>
<p>
Instagram es una red social y aplicación. Su función es subir fotos, vídeos. Está disponible
para dispositivos Android e iOS. y actualmente pertenece a Facebook, Inc.
</p>
</div>
</a>
</article>
<article>
<a href="https://www.pinterest.com">
<img src="img/pinterest.svg" alt="Pinterest">
<div>
<h3>Pinterest</h3>
<p>
Pinterest es una plataforma que permite a los usuarios crear y administrar, en tableros
personales temáticos, colecciones de imágenes como eventos, intereses, hobbies y mucho más.
</p>
</div>
</a>
</article>
</section>
<footer>
<div>
<a href="https://www.facebook.com">
<img src="img/facebook.svg" alt="Facebook">
</a>
<a href="https://www.twitter.com">
<img src="img/twitter.svg" alt="Twitter">
</a>
<a href="https://www.youtube.com">
<img src="img/youtube.svg" alt="YouTube">
</a>
<a href="https://www.linkedin.com">
<img src="img/linkedin.svg" alt="LInkedIn">
</a>
<a href="https://www.instagram.com">
<img src="img/instagram.svg" alt="Instagram">
</a>
<a href="https://www.pinterest.com">
<img src="img/pinterest.svg" alt="Pinterest">
</a>
</div>
<!-- cambia estos datos por otros tuyos -->
<p>©2019. <a href="https://www.jairogarciarincon.com">jairogarciarincon</a>.</p>
</footer>
</body>
</html>


Se adjuntan imágenes de cómo podría ser la solución a nivel visual (escritorio, tablet y móvil):

Solución para Escritorio


Solución para Tablet


Solución para Móvil

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