Home | Clases | Sass y SCSS | Soluciones Bloque 1

Soluciones Bloque 1


Cuestiones Bloque 1

  • 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

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



Puedes descargarte el proyecto completo o comprobar los diferentes archivos a continuación con tu solución:

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>


Archivo index_sass.html:

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 Sass</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_sass.css">
</head>
<body>
<header>
<h1>Ejercicio 1 Sass</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>


Archivo index_scss.html:

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 SCSS</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_scss.css">
</head>
<body>
<header>
<h1>Ejercicio 1 SCSS</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>


Archivo index_less.html:

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 LESS</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_less.css">
</head>
<body>
<header>
<h1>Ejercicio 1 LESS</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>


Archivo css/style.css:

html {
background-color: #CCC;
}

body {
font: 100% Helvetica, sans-serif;
color: #F00;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #FFF;
}

nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #000;
}



Archivo sass/style_sass.sass:

$fuente: Helvetica, sans-serif
$color: #F00
$color_menu: #FFF
$color_enlaces: #000
$fondo: #CCC

html
background-color: $fondo


body
font: 100% $fuente
color: $color

nav
ul
margin: 0
padding: 0
list-style: none
color: $color_menu

li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none
color: $color_enlaces



Archivo scss/style_scss.scss:

$fuente: Helvetica, sans-serif;
$color: #F00;
$color_menu: #FFF;
$color_enlaces: #000;
$fondo: #CCC;

html{
background-color: $fondo;
}

body{
font: 100% $fuente;
color: $color;
}

nav{
ul{
margin: 0;
padding: 0;
list-style: none;
color: $color_menu;
}

li{
display: inline-block;
}

a{
display: block;
padding: 6px 12px;
text-decoration: none;
color: $color_enlaces;
}
}



Archivo less/style_less.less:

@fuente: Helvetica, sans-serif;
@color: #F00;
@color_menu: #FFF;
@color_enlaces: #000;
@fondo: #CCC;

html{
background-color: @fondo;
}

body{
font: 100% @fuente;
color: @color;
}

nav{
ul{
margin: 0;
padding: 0;
list-style: none;
color: @color_menu;
}

li{
display: inline-block;
}

a{
display: block;
padding: 6px 12px;
text-decoration: none;
color: @color_enlaces;
}
}


Archivo compilado css/style_sass.css:

html {
background-color: #CCC;
}

body {
font: 100% Helvetica, sans-serif;
color: #F00;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #FFF;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #000;
}

/*# sourceMappingURL=style_sass.css.map */


Archivo compilado css/style_scss.css:

html {
background-color: #CCC;
}

body {
font: 100% Helvetica, sans-serif;
color: #F00;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #FFF;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #000;
}

/*# sourceMappingURL=style_scss.css.map */


Archivo compilado css/style_less.css:

html {
background-color: #CCC;
}
body {
font: 100% Helvetica, sans-serif;
color: #F00;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #FFF;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #000;
}
/*# sourceMappingURL=style_less.css.map */

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