Introduccion

En este curso de comenta cómo hacer

●​ Variables
●​ Crear mixins
●​ Selectores aninadados
●​ Herencia

Proyecto - landing page

¿Qué es Sass?

Sass significa Syntatically Awesome Stylesheets y es un preprocesador de CSS que se

utiliza para trabajar los estilos de tu proyecto agregando funcionalidades con las que no
cuenta CSS. Está basado en Ruby.

Sass cuenta con soporte para modularizar estilos, haciendo uso

●​ Sass cuenta con soporte para modularizar estilos haciendo uso de la regla use
●​ Usa variables, que sirven para almacenar un tipo de dato
●​ Cuenta con mixins, parecido a las funciones, ya que reciben parametros de entrada
●​ Selectores anidados, que nos permite escribir menos código y más mantenible
●​ La herencia nos permite compartir propiedades entre selectores

Sass es flexible y compatible con el CSS tradicional, por tanto, cuando trabajamos con él
tenemos la opción de utilizar dos diferentes extensiones (.sass y .scss)

●​ .sass utiliza una sintaxis identada, quitando el uso de { } y el ; tras su declaracion

●​ .scss utiliza sintaxis tradicional de CSS, incluyendo el uso de { } y el ; tras cada
declaración

Diferencias entre ambos elementos

¿Cómo funcionan los preprocesadores?

Un preprocesador es una herramienta que nos permite escribir pseudocódigo recibiendo

como parámetro de entrada los estilos que posteriormente serán convertidos a CSS nativo.
Podemos decir que funcionan de manera similar a los traductores pues al indicarle una
sintaxis devuelve los valores en una sintaxis nueva.
​
En SASS se incluyen características adicionales, como variables, mixins, herencia de
clases, entre otras, que hacen que el proceso de escritura de CSS sea más fácil y rápido.

Para poder hacer uso de un preprocesador, primero es necesario entender cómo funcionan
los estilos CSS y el navegador. Los estilos CSS son interpretados y representados por el
navegador, el cual se encarga de leer el código CSS y aplicarlo a los elementos o
componentes HTML de la página.

Es el navegador quien recorre la hoja de estilos, línea por línea, y asigna propiedades a los
elementos de la página según lo indicado en el código CSS. Este proceso es fundamental
para permitir que la página se estilice de la manera deseada, teniendo control sobre el
diseño y la disposición de la página, proporcionando al usuario una experiencia visual
atractiva, donde todos los elementos están estilizados y presentados de una manera
agradable a la vista y fácil de interactuar.
Ventajas de utilizar un Preprocesador

Los principales beneficios de usar un preprocesador como SASS son la rapidez y la

productividad. Permitiendo que el código se pueda escribir de manera mucho más rápida y
sencilla, ayudando a los desarrolladores a ahorrar tiempo y ser más productivos.

También hacen que el mantenimiento del código sea más fácil, pues todos los estilos se
guardan en un solo archivo. La reutilización de código es otro de los beneficios que nos trae
el uso de un preprocesador, esto significa que los mismos estilos se pueden aplicar en
varias páginas sin tener que escribir el código una y otra vez.
​
Finalmente el uso de preprocesadores nos permite que sea mucho más sencillo trabajar
una página web de manera responsiva.

Tipos de Preprocesadores

Stylus
​
Stylus es un lenguaje de programación de hojas de estilo en cascada (CSS) que se compila
en CSS estándar, está basado en JavaScript. Hay algunas diferencias importantes entre
Stylus y SASS.

La sintaxis de Stylus es más simple y clara, mientras que la sintaxis de SASS se considera
más profesional y compleja. Stylus ofrece una mejor portabilidad y es más fácil de usar. Sin
embargo, SASS ofrece mayor soporte al ser utilizado con una mayor cantidad de lenguajes
de programación.

Conoce Stylus

LESS
​
Una de las principales diferencias entre LESS y Sass es que Sass está codificado en Ruby
y, por lo tanto, se procesa del lado del servidor, mientras que Less es una biblioteca de
JavaScript (Como Stylus) y se procesa del lado del cliente. Un ejemplo es la forma en que
ambos lenguajes manejan las variables es distinta. En LESS, los nombres de las variables
se inicializan con @ y en Sass los nombres de las variables se inicializan con el símbolo $.

Conoce LESS

Anatomía de un proyecto de Sass e instalaccion

Es muy importante tener en cuenta el proceso de compilado, ya que para hacer uso de
Sass debemos tener en cuenta el

●​ Input file: Es el archivo en el que vamos a escribir nuestros estilos haciendo uso de
la sintaxis de Sass, incluyendo la extensión .scss en el nombre del archivo.

●​ Output file: El archivo de salida es donde se colocarán los estilos finales con CSS
nativo, que provienen del archivo de entrada. Nunca se debe editar el archivo final

●​ Comandos para ejecutar y compilar Sass:

Tipos de instalación de Sass

1.​ Instalación global en el sistema operativo

2.​ Haciendo uso de Node.js
3.​ Dart Sass
4.​ JavaScript API
5.​ Live Sass compiler - Extension de VSC que nos permitirá trabajar con Sass de una
manera sencilla, además de compilar nuestros estilos en tiempo real sin la
necesidad de ejecutar los comandos manualmente

Configuracion de archivos en VSC

 ●​ Carpeta css: nos aseguramos de que dentro está el archivo main.css y
main.css.map
●​ Carpeta scss: dentro de ella archivo main.scss
●​ Archivo HTML: hacemos el boilerplate y agregamos el link a css linkeando al
main.css link rel="stylesheet" href="./css/main.css"

Extensiones en vsc

●​ Sass
●​ Live sass compiler
●​ Live server

Configuracion del sass compiler

1.​ Ir a settings de vsc

2.​ Buscar sass format
3.​ Hacer scroll down a live sass compile - settings: formats y abrimso el settings.json
4.​ Revisar que el Json está configurado así

{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
}

1.​ Ctrol shift P y buscamos live sass watch para ver que el live sass compiler corre en
la terminal

Reglas y uso

Estructura de la hora de estilso y variables

Algunos estatements contienen bloques y se definen entre un par de corchetes {}, son
separados mediante punto y coma.

Las declaraciones, que solo se pueden utilizar en la parte superior de la hoja de estilos, se
conocen como top level statements. Ejemplo de top level statements son
 ●​ Imports
●​ Definicion de un Mixim
●​ Definicion de una funcion
●​ Modulos

Por otra parte tenemos los universal statements, que podemos usar en cualquier parte de la
hoja de estilos. Estos se conocen como universals tatements y estos son

●​ Variables, estructuras de control y las reglas @debug

●​ Declaraciones CSS: Reglas de estilo, At rules y mixings

Tipos de variables

Una variable es un espacio asignado en memoria y únicamente puede almacenar un dato

●​ Las variables pueden ser declaradas en cualquier parte de la hoja de rutas

Para asignar un valor a una variable se uso del símbolo de $, de esta manera es posible
referenciar dentro de la hoja de estilos.

$primary-color: blue;
$secondary-color: green;
$tertiart-color: purple;

Existen diferencias entre las variables de CSS y las variables de Sass

CSS variables Sass variables

Pueden tener diferentes valores para Tienen un valor unico, correspondiente a un

distintos elementos elemento

Son declarativas Son imperativas > en el momento en el que

actualicemos el valor de la variable va a
cambiar en automatico

!default flag

Se encarga de asignar un valor a la variable si y sólo si esa variable no está definida o su

valor es null.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;5
00;700&display=swap" rel="stylesheet">

</head>
<body>

</body>
</html>

main.scss

$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;
$font-stack: 'IBM Plex Sans', sans-serif;;

body {
margin:0;
padding: 0;
}

Uso de selectores, scope de las variables

Un selector de CSS define sobre qué elementos se aplicará un conjunto de reglas CSS.
Existen selectores de tipo

●​ Clase
●​ ID
●​ Tipo
●​ Atributo

Estos selectores pueden ser de distinto tipo.

El scope dentro de Sass hace referencia al contexto en el que existe la variable y donde es
posible hacer uso de la misma

●​ Variables locales: Las variables locales stand eclaradas dentro de un bloque {}.
Cualquier selector anidado puede acceder a las variables locales declaradas dentro
del selector
●​ Variables globales: Por default, todas las variables declaradas fuera de una elector
son globales, esto significa que se puede acceder a ellas en cualquier parte d
enuestra hoja de estilos

En sass existe el concepto de shadowing, que significa que las variables locales y globales
pueden tener distintos nombres, ya que se encuentran en diferente nivel del scope. Esto
puede ayudar a que no se llegue a modificar por error el valor de las variables globales.

En caso de querer modificar el valor global de una variable dentro del scope de una variable
local, se hace uso de la flag !global.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;5
00;700&display=swap" rel="stylesheet">

</head>
<body>
<nav class="navbar"></nav>
<main class="main-section"></main>
<footer class="footer-section"></footer>
</body>
</html>

Main.scss
$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;
$font-stack: 'IBM Plex Sans', sans-serif;;

body {
margin:0;
padding: 0;
}

/* */

nav {
width: 100%;
height: 100px;
}

main{
background-color: $primary-color;
}

footer {
background: #FA9500;
width: 100%;
height: 250px;
}

Creando la estructura del proyecto

​ Subimos los assets del proyectos a VSC

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;5
00;700&display=swap" rel="stylesheet">

</head>
<body>
<nav class="navbar">
<p>Eco-Store</p>
<button class="profile">
<svg></svg>
</button>
<button class="wishlist">
<svg></svg>
</button>
<button class="cart">
<svg></svg>
</button>
</nav>
<main class="main-section">
<article>
<div class="info-section">
<h1>Impacto ecologico</h1>
<p>Debido al impacto ambiental siendo las acciones
humanas las que modifican el ambiente, Eco-store se compromete a
elaborar sus productos de manera artesanal y con materiales que
favorecen al cuidado del medio ambiente.</p>
<button>Conoce mas</button>
</div>
<div class="image-section">
<img src="" alt="">
</div>
</article>
<section class="product-section">
<div class="healthcare">
<h2>Cuidado de la salud</h2>
</div>
<div class="furniture">
<h2>Decoracion del hogar</h2>
</div>
</section>
<section class="info-section">
 <div class="about-us">
<h2>¿Por qué nosotros?</h2>
<div class="earty">
<img src="" alt="">
<p></p>
</div>
</div>
</div>
<div class="gallery">
<h2>Galería de estilos</h2>
</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div class="location">
<h2>Encuéntranos</h2>
<div class="map">
<img src="" alt="">
</div>
<p></p>
</div>
</section>
</main>
<footer>
<h3>Eco-store</h3>
<p>Careers</p>
<p>Careers</p>
<p>Careers</p>
<div class="social-media">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</footer>
</body>
</html>
At rules CSS y nesting

Una at rule es una declaracion que cumple con diferentes funciones, se inicializa con el
símbolo @ y cuenta con sintaxis propia. Las at rules dentro de Sass ayudarán a mantener la
compatibilidad con próximas versiones de CSS.

Algunas at rules son

●​ @use: importa, modulos estilos y funciones de otras hojas de estilos. La diferencia

con @import es que import se encarga de hacer los estilos globales.
●​ @function: permite crear funciones personalizadas, sin embargo Sass cuenta con
funciones ya existentes.
●​ @forward: Recibe como parámetro una URL y nos ayuda a cargar los estilos de
nuestra hoja de estilos, es muy importante hacer uso de @use para que los modulos
están disponibles en nuestra hoja de estilos.
●​ @extend: tiene que ver con el concepto de herencia.
●​ @at-root: se encarga de cargar nuestros estilos en el root del css.
●​ @include: nos ayuda a invocar los mixins.
●​ @error, @warn @debug: sirver para cuando hay un error, una advertencia o se
quiere debugear, respectivamente
●​ @for, @if, @each, @while: tienen que ver con estructuras de control, se pueden
usar dentro de una función

Nesting o anidacion de selectores nos permite tener selectores dentro de otros, escribiendo
los selectores en el orden que aparecen en el HTML. Por ejemplo:

nav {
width: 100%;
height: 100px;
p {
font-size: 1.5em;
padding-left: 30px;
}
}

Expresiones: literales y operaciones

Una expresion es todo aquello que va del lado derecho de una variable, admitiendo varios
tipos de valores.

Las expresiones son mucho más poderosas que los valores CSS simples, ya que se pasan
como argumentos a mixins y funciones.

Expresiones literales son

Numeros

body {
margin:0;
padding: 0;
}

Strings

$font-stack: 'IBM Plex Sans', sans-serif;;

Colores

$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;

También podemos pasar los codigos en RGB

Booleanos

Null

Listas

Mapas

Seccion main

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;5
00;700&display=swap" rel="stylesheet">

</head>
<body>
<nav class="navbar">
<p>Eco-Store</p>
<div class="icons">
<button class="profile">
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.121 17.804C7.21942 16.6179 9.58958
15.9963 12 16C14.5 16 16.847 16.655 18.879 17.804M15 10C15 10.7956
14.6839 11.5587 14.1213 12.1213C13.5587 12.6839 12.7956 13 12
13C11.2044 13 10.4413 12.6839 9.87868 12.1213C9.31607 11.5587 9 10.7956
9 10C9 9.20435 9.31607 8.44129 9.87868 7.87868C10.4413 7.31607 11.2044
7 12 7C12.7956 7 13.5587 7.31607 14.1213 7.87868C14.6839 8.44129 15
9.20435 15 10ZM21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626
16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626
15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778
20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604
18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522
3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387
3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518
7.32387 21 9.61305 21 12Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

</button>
<button>
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194 3.90017
6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A04" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

</button>
<button class="cart">
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M5.4 5H21L17 13H7M5.4 5L7 13M7
13L4.707 15.293C4.077 15.923 4.523 17 5.414 17H17M17 17C16.4696 17
15.9609 17.2107 15.5858 17.5858C15.2107 17.9609 15 18.4696 15 19C15
19.5304 15.2107 20.0391 15.5858 20.4142C15.9609 20.7893 16.4696 21 17
21C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19
19.5304 19 19C19 18.4696 18.7893 17.9609 18.4142 17.5858C18.0391
17.2107 17.5304 17 17 17ZM9 19C9 19.5304 8.78929 20.0391 8.41421
20.4142C8.03914 20.7893 7.53043 21 7 21C6.46957 21 5.96086 20.7893
5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19C5 18.4696 5.21071
17.9609 5.58579 17.5858C5.96086 17.2107 6.46957 17 7 17C7.53043 17
8.03914 17.2107 8.41421 17.5858C8.78929 17.9609 9 18.4696 9 19Z"
stroke="#7C6A04" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</div>
</nav>
<main class="main-section">
<article>
<div class="info-section">
<h1>Impacto ecologico</h1>
<p>Debido al impacto ambiental siendo las acciones
humanas <br>
las que modifican el ambiente, Eco-store <br>
se compromete a elaborar sus productos de manera
<br> artesanal y con materiales que favorecen al cuidado <br> del medio
ambiente.</p>
<button>Conoce mas</button>
</div>
<div class="image-section">
<img src="./assets/img/main.jpg" alt="">
</div>
</article>
 <section class="product-section">
<div class="healthcare">
<h2>Cuidado de la salud</h2>
</div>
<div class="furniture">
<h2>Decoracion del hogar</h2>
</div>
</section>
<section class="info-section">
<div class="about-us">
<h2>¿Por qué nosotros?</h2>
<div class="earty">
<img src="" alt="">
<p></p>
</div>
</div>
</div>
<div class="gallery">
<h2>Galería de estilos</h2>
</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div class="location">
<h2>Encuéntranos</h2>
<div class="map">
<img src="" alt="">
</div>
<p></p>
</div>
</section>
</main>
<footer>
<h3>Eco-store</h3>
<p>Careers</p>
<p>Careers</p>
<p>Careers</p>
 <div class="social-media">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</footer>
</body>
</html>

SCSS

$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;
$quaternion-color: #FA9500;
$font-stack: 'IBM Plex Sans', sans-serif;;
$paragraph-size: 1.5em;

body {
margin:0;
padding: 0;
background-color: $primary-color;
font-family: $font-stack;
}

/* */

nav {
width: auto;
height: 100px;
display: flex;
justify-content: space-between;
color: $primary-text-color;
padding: 15px;
p {
font-size: $paragraph-size;
padding-left: 30px;
}

.icons {
display: flex;
gap: 15px;
 button {
border-style: none;
background: none;
}
}
}

article {
width: auto;
color: $primary-text-color;
padding-left: 45px;
padding-right: 45px;
display: flex;
justify-content: space-around;
.impact-section {
display: flex;
flex-direction: column;
padding-top: 50px;
gap: 25px;
}
h1 {
font-size: 3em;
padding: 0px;
margin: 0px;
}
p {
font-size: $paragraph-size;
}

button {
background: none;
padding: 20px;
background-color: $quaternion-color;
border-style: none;
width: 12vw;
border-radius: 35px;
color: white;
font-size: 1em;
}

img{
width: 25vw;
border-radius: 19px;
 }
}

main{
background-color: $primary-color;
}

footer {

width: 100%;
height: 250px;
}

Herencia

El concepto de la herencia en Sass, es un concepto bastante sencillo, pero muy poderoso,

que si lo sabes aplicar va a acelerar y optimizar tu desarrollo.​
.​
Muchas veces al estar creando nuestros estilos podemos caer en la repetición de código,
esto conlleva a dos problemas, Primero se comienza a extender bastante la hoja de estilos
y se vuelve difícil de mantener a lo largo del tiempo, el otro problema que puede surgir es el
desorden, entonces, si queremos arreglar o cambiar alguna parte de nuestro código va a
ser más difícil hacerlo.​
.​
Por suerte tenemos a nuestro buen amigo SASS, piénsalo así, muchas veces usamos
patrones de diseño, responsive es patrones, nos dan ciertas guías o convenciones para
saber como organizar CSS, el más usado es BEM.​
.​
BEM nos propone crear estilos generales con una clase y luego modificar esa clase según
nos convenga, por ejemplo:

<div class="error error--serious">

Oh no! You've been hacked!
</div>

En este ejemplo tenemos un div con dos clases “error” y “error–serious”, una buena opción
para estilizar este div, suponiendo que los necesitáramos reutilizar más adelante, sería de la
siguiente forma:​
.
●​ Estilizamos la clase general con los estilos básicos que se repetirán a lo largo de los
div
 ●​ Luego estilizamos el div en específico que tendrá otros estilos adicionales

.error {
border: 1px #f00;
background-color: #fdd;
}

.error--serious {
border-width: 3px;
}

Pero esto se puede simplificar aún más usando la herencia con SASS

.error {
border: 1px #f00;
background-color: #fdd;

&--serious {
@extend .error;
border-width: 3px;
}
}

De esta manera no solo estamos organizando el código y evitando reutilizar código, si no

además se puede entender de una mejor forma de donde viene los estilos heredados y a
que clase hacen referencia

Mixins

Los mixins permiten definir estilos que se pueden reutilizar en toda su hoja de estilos y
facilitan evitar el uso de clases no semanticas.

Los misins se declaran con @mixin seguido del nombre que queremos asignar y se invoca
con @include seguido del nombre de Mixin.

Argumentos en mixins

●​ Un argumento es el nombre de una variable que está separada por una coma
●​ La utilidad de los mixins no sería tal si no tuviera la capacidad de recibir argumentos

Ejemplo de mixin

@mixin circle2 ($width, $height, $color) {

width: $width;
 height: $height;
background: $color;
}

Html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;5
00;700&display=swap" rel="stylesheet">

</head>
<body>
<nav class="navbar">
<p>Eco-Store</p>
<div class="icons">
<button class="profile">
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.121 17.804C7.21942 16.6179 9.58958
15.9963 12 16C14.5 16 16.847 16.655 18.879 17.804M15 10C15 10.7956
14.6839 11.5587 14.1213 12.1213C13.5587 12.6839 12.7956 13 12
13C11.2044 13 10.4413 12.6839 9.87868 12.1213C9.31607 11.5587 9 10.7956
9 10C9 9.20435 9.31607 8.44129 9.87868 7.87868C10.4413 7.31607 11.2044
7 12 7C12.7956 7 13.5587 7.31607 14.1213 7.87868C14.6839 8.44129 15
9.20435 15 10ZM21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626
16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626
15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778
20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604
18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522
3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387
3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518
7.32387 21 9.61305 21 12Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

</button>
<button>
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194 3.90017
6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A04" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>

</button>
<button class="card">
<svg width="36" height="36" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M5.4 5H21L17 13H7M5.4 5L7 13M7
13L4.707 15.293C4.077 15.923 4.523 17 5.414 17H17M17 17C16.4696 17
15.9609 17.2107 15.5858 17.5858C15.2107 17.9609 15 18.4696 15 19C15
19.5304 15.2107 20.0391 15.5858 20.4142C15.9609 20.7893 16.4696 21 17
21C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19
19.5304 19 19C19 18.4696 18.7893 17.9609 18.4142 17.5858C18.0391
17.2107 17.5304 17 17 17ZM9 19C9 19.5304 8.78929 20.0391 8.41421
20.4142C8.03914 20.7893 7.53043 21 7 21C6.46957 21 5.96086 20.7893
5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19C5 18.4696 5.21071
17.9609 5.58579 17.5858C5.96086 17.2107 6.46957 17 7 17C7.53043 17
8.03914 17.2107 8.41421 17.5858C8.78929 17.9609 9 18.4696 9 19Z"
stroke="#7C6A04" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</button>
</div>
</nav>
 <main class="main-section">
<article>
<div class="info-section">
<h1>Impacto ecologico</h1>
<p>Debido al impacto ambiental siendo las acciones
humanas <br>
las que modifican el ambiente, Eco-store <br>
se compromete a elaborar sus productos de manera
<br> artesanal y con materiales que favorecen al cuidado <br> del medio
ambiente.</p>
<button>Conoce mas</button>
</div>
<div class="image-section">
<img src="./assets/img/main.jpg" alt="">
</div>
</article>
<section class="product-section">
<div class="healthcare">
<h2>Cuidado de la salud</h2>
<div class="card-section">
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24inc" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
<h3>
Cepillo de bambu
 </h3>
<p>Paquete de 2 unidades</p>
</div>
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
<h3>
Cepillo de bambu
</h3>
<p>Paquete de 2 unidades</p>
</div>
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
<h3>
Cepillo de bambu
</h3>
<p>Paquete de 2 unidades</p>
</div>
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
<h3>
Cepillo de bambu
</h3>
<p>Paquete de 2 unidades</p>
</div>
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
<h3>
Cepillo de bambu
</h3>
<p>Paquete de 2 unidades</p>
</div>
<div class="product-card">
<div class="icon">
<svg width="24" height="24" viewBox="0 0 24
24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.34255 7.7779C3.5687 7.23194
3.90017 6.73586 4.31804 6.31799C4.7359 5.90012 5.23198 5.56865 5.77795
5.3425C6.32392 5.11635 6.90909 4.99995 7.50004 4.99995C8.09099 4.99995
8.67616 5.11635 9.22213 5.3425C9.7681 5.56865 10.2642 5.90012 10.682
6.31799L12 7.63599L13.318 6.31799C14.162 5.47407 15.3066 4.99997 16.5
4.99997C17.6935 4.99997 18.8381 5.47407 19.682 6.31799C20.526 7.16191
21.0001 8.30651 21.0001 9.49999C21.0001 10.6935 20.526 11.8381 19.682
12.682L12 20.364L4.31804 12.682C3.90017 12.2641 3.5687 11.7681 3.34255
11.2221C3.1164 10.6761 3 10.0909 3 9.49999C3 8.90904 3.1164 8.32387
3.34255 7.7779Z" stroke="#7C6A0A" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="product-image">
<img
src="./assets/img/products/toothbrush.jpg" alt="">
</div>
 <h3>
Cepillo de bambu
</h3>
<p>Paquete de 2 unidades</p>
</div>
</div>
</div>
<div class="furniture">
<h2>Decoracion del hogar</h2>
</div>
</section>
<section class="info-section">
<div class="about-us">
<h2>¿Por qué nosotros?</h2>
<div class="earty">
<img src="" alt="">
<p></p>
</div>
</div>
</div>
<div class="gallery">
<h2>Galería de estilos</h2>
</div>
<div>

</div>
<div>

</div>
<div>

</div>
<div class="location">
<h2>Encuéntranos</h2>
<div class="map">
<img src="" alt="">
</div>
<p></p>
</div>
</section>
</main>
<footer>
<h3>Eco-store</h3>
 <p>Careers</p>
<p>Careers</p>
<p>Careers</p>
<div class="social-media">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</footer>
</body>
</html>

Scss

$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;
$quaternary-color: #FA9500;
$font-stack: 'IBM Plex Sans', sans-serif;;
$paragraph-size: 1.5em;

@mixin flexCenter($direction, $content, $align) {

display: flex;
flex-direction: $direction;
justify-content: $content;
align-items: $align;
}

@mixin buttonStyle {
button{
background: none;
border-style: none;
}
}

body {
margin:0;
padding: 0;
background-color: $primary-color;
font-family: $font-stack;
}
/* */

nav {
width: auto;
@include flexCenter(row, space-between, center);
height: 100px;
display: flex;
justify-content: space-between;
color: $primary-text-color;
padding: 15px;
p {
font-size: $paragraph-size;
padding-left: 30px;
}

.icons {
display: flex;
gap: 15px;
@include buttonStyle();
}
}

article {
width: auto;
color: $primary-text-color;
@include flexCenter(row, space-between, center);
padding-left: 45px;
padding-right: 45px;
display: flex;
justify-content: space-around;
.impact-section {
@include flexCenter(column, space-evenly,flex-start);
flex-direction: column;
padding-top: 50px;
gap: 40px;
}
h1 {
font-size: 3em;
padding: 0px;
margin: 0px;
}
p {
font-size: $paragraph-size;
 }

@include buttonStyle;
button {
background: none;
padding: 20px;
background-color: $quaternary-color;
border-style: none;
width: 12vw;
border-radius: 35px;
color: white;
font-size: 1em;
}

img{
width: 25vw;
border-radius: 19px;
}
}

section{
width: auto;
height: auto;
padding: 60px;
h2{
color: $primary-text-color;
font-size: 2em;
}
.healthcare{
padding-bottom: 60px;
width: auto;
h2{
font-weight: 300;
padding-bottom: 20px;
}
.card-section{
width: auto;
height: auto;
@include flexCenter(row, space-evenly, center);
flex-wrap: wrap;
column-gap: 200px;
row-gap: 80px;
}
 .product-card {
width: 14vw;
height: 45vh;
background-color: $secondary-color;
color: $primary-text-color;
padding: 20px;
border-radius: 8px;

.icon{
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: 12px;

svg{
width: 28px;
height: 28px;
}
}

.product-image{
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
img{
width: 12vw;
height: 30vh;
object-fit: cover;
border-radius: 6px;
}
}
}
}

.furniture {
@extend .healthcare;
.product-card{
background-color: $tertiary-color;
color: white;
}
 }
}

main{
background-color: $primary-color;
}

footer {

width: 100%;
height: 250px;
}

@mixin circle2 ($width, $height, $color) {

width: $width;
height: $height;
background: $color;
}

Funciones

Las funciones permiten definir operaciones complejas en valores de Sass. Las funciones se
definen usando la regla @function

Sass como preprocesador tiene una gran cantidad de funciones, algunos ejemplos son:

●​ Funcione RGB
●​ Funciones HSL
●​ Funciones de opacidad
●​ Funciones sobre strings
●​ Funciones sobre numeros

Sass es compatible con una gran cantidad de operadores utiles para trabajar con diferentes
valores. Estos incluyen los operadores matematicos estandar y operadores para varios
otros tipos, por ejemplo === y !=

La jerarquia de operaciones

●​ Los operadores unarios not, +y

 ●​ Operadores *, y /%
●​ Operadores + y -
●​ Operadores >, >=, < y <=
●​ Operadores de comparación == y !=
●​ El operador logico and
●​ El operador logico or
●​ El operador de asignacion

Las funciones llaman utilizan sintaxis de funcion CSS

@function pow($base, $exponent) {

$result: 1;
@for $_ from 1 through $exponent {
$result: $result * base;
}
@return $result;
}

.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}

Parte final del proyecto

¿Por qué nosotros?

Quizzes

¿Qué es la flag ‘default’ en Sass?

Una flag que asigna un valor a la variable si y sólo si la variable no ha sido definida o su valor
es igual a nulo

¿Cuándo se puede omitir la propiedad background-color?

Si el elemento tiene el mismo color que el background de la página

¿Qué símbolo se utiliza para inicializar At Rules en CSS y Sass?

@

¿Qué sucede si no se establecen medidas para el main?

El main no será visible

Sobre las At Rules, ¿cuál es la función de la regla @function?

Crear funciones personalizadas.

¿Qué formatos de color se pueden utilizar al diseñar páginas web?

Código hexadecimal, RGB, RGBA

¿Cuáles son algunas de las unidades de medida comunes para establecer estilos en páginas
web?
Pixeles, porcentaje de la pantalla, view height (vh) y view width (vw)

¿Cómo se puede organizar elementos de una columna en un contenedor Flex?

Cambiar la `flex-direction` a `column` y ajustar el espacio entre elementos con `gap`

¿Qué propiedad CSS puede ser empleada para eliminar margen y padding existente en un
elemento?
padding: 0; margin: 0;

¿Para qué se utiliza la variable 'direction' en el mixin de flexbox?

Define la orientación de las columnas (flex direction row o flex direction column)

¿Cuál es el propósito de usar argumentos en los mixins de Sass?

Hacer que los mixins sean más dinámicos y reutilizables

¿Qué símbolo se utiliza para incluir mixins en Sass?

@include
¿Qué facilita el uso de mixins?
La manipulación y estilización de elementos en un diseño

¿Cómo se ajusta el espacio entre elementos en una columna usando CSS?

Usando 'gap: 25px'

¿Para qué sirve la herencia en el diseño web?

Mantener la consistencia y facilitar la edición de elementos similares
2.
¿Qué se hace para posicionar un ícono a la derecha de una card?
display: flex, justify-content: flex-end

¿Qué significa la sigla Sass?

Syntactically Awesome Style sheets

Selecciona la opción correcta referente a la definición de Sass.

Es un preprocesador de CSS que se utiliza para agregar características adicionales a CSS.

¿Qué es un preprocesador?
Un preprocesador es una herramienta que nos permite traducir nuestros estilos escritos a
una sintaxis específica a CSS nativo.

Es una ventaja de utilizar preprocesadores.

Aumentan la productividad y permiten tener un código más mantenible.

Selecciona la opción correcta

Un proyecto de Sass se compone de un archivo de entrada (Input) un archivo de Salida
(Output) y el comando de compilación.

Las declaraciones universales se pueden utilizar en cualquier parte de la hoja de estilos.

Verdadero

Selecciona la opción correcta

Las variables en Sass se declaran de la siguiente manera: $primary-color: red;

¿Qué es el Scope?
El scope hace referencia al contexto en el que son declaradas las variables.

Selecciona la opción correcta

El uso de HTML semántico incluye etiquetas como: <section>,<article> y <main>.
¿Para qué sirven las at-Rules?
Son reglas de CSS que cumplen con diferentes funciones y cuenta con su sintaxis propia.

Selecciona la opción correcta

La anidación dentro de Sass permite tener selectores dentro de otros y nos ayudan a
simplificar el código.

Son ejemplos de expresiones simples

Números, strings y booleanos.

Para inicializar el uso de flexbox debemos utilizar la propiedad de CSS display: flex
Verdadero

Selecciona la opción correcta

La herencia ayuda a reutilzar estilos previamente declarados dentro de un bloque de la hoja
de estilos.
REPASAR CLASE

Selecciona la opción correcta

Para hacer uso de la herencia en Sass es necesario utilizar la regla @extend seguido del
nombre de la clase.

Los mixins permiten definir estilos que se pueden reutilizar en toda su hoja de estilos y
facilitan evitar el uso de clases no semánticas
Verdadero

¿Cómo se utilizan los mixins en Sass?

Se declaran con la directiva @mixin y se invocan con @include seguido del nombre del
mixin.