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

Evaluación Bloque 1


Cuestiones Bloque 1

Responde correctamente a las siguientes preguntas:

  • Un preprocesador de CSS es:

    • Un lenguaje de hoja de estilos.

    • Una extensión de CSS.

    • Un entorno de desarrollo.

    • a y b son correctas.


  • Una diferencia entre SCSS, Sass y LESS podría ser:

    • LESS está escrita en Javascript y Sass/SCSS originalmente en Ruby.

    • LESS está escrita en Ruby y Sass/SCSS originalmente en Javascript.

    • LESS es de pago y Sass/SCSS son gratuitas.

    • Ninguna de las anteriores es cierta.


  • Para poder utilizar un preprocesador CSS en nuestro proyecto necesitamos:

    • Instalar una aplicación de terceros.

    • Instalar sass desde la consola y escribir los comandos necesarios.

    • Instalar sass desde la consola y configurar un IDE como NetBeans o WebStorm.

    • Todas las anteriores son válidas.


  • Para que se compilen automáticamente al hacer cambios los archivos Sass, LESS y SCSS:

    • Utilizamos el flag --auto.

    • Utilizamos el flag --watch.

    • Utilizamos el flag –interactive.

    • Utilizamos el flag --trace.


  • ¿Es posible compilar y vigilar (watch) todos los archivos de un directorio con una sola sentencia desde la consola?

    • No.

    • Si, mediante el comando sass directorio_sass:directorio_css.

    • Si, mediante el comando sass --watch directorio_sass:directorio_css.

    • Si, mediante el comando sass --watch --all directorio_sass:directorio_css.



Ejercicio 1

Crea un nuevo proyecto en NetBeans de tipo HTML5/JS Application o WebStorm con las siguientes características:

  • Debe incluir 4 archivos de tipo html llamados index.html, index_sass.html, index_scss.html e index_less.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, SCSS y LESS, respectivamente).

  • Debe incluir cuatro carpetas llamadas css, sass, scss y less.

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

  • Dentro de la carpeta less crearemos el archivo style_less.less.

  • Añade los estilos de ejemplo del apartado anterior a cada archivo correspondiente.

  • Cuando guardemos datos en cualquiera de los 3 archivos pre-procesados, comprobarás que se habrán creado archivos asociados en la carpeta css.

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


<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 CSS Puro</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<h1>Ejercicio 1 CSS Puro</h1>
</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>
</body>
</html>


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):


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