No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
23H
19M
19S

Estructura de la hoja de estilos y variables

4/20
Recursos

Aportes 17

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En React se pueden utilizar archivos scss directamente sin convertirlos en css, desde JavaScript se generan los estilos en autom谩tico. Es algo 煤til.

El c贸digo de la clase:

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

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Fuentes directas

<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap鈥 rel=鈥渟tylesheet鈥>

Una recomendaci贸n futura para pr贸ximos pasos, podr铆a ser el modularizar nuestro c贸digo.

Modularizar es partir o dividir nuestro c贸digo en varios archivos, cada archivo se centra en algo muy espec铆fico para tener una mejor visi贸n de nuestro proyecto y as铆 facilitar el desarrollo.

SASS nos da esa facilidad con ayuda de los Partials, les recomiendo consultar la documentaci贸n de sass en ese apartado, ya que es de gran ayuda, pero de todas formas lo veremos un poco m谩s adelante en el curso.

Les recomiendo este video

Estructura de la hoja de estilos

Algunos statements contienen bloques y se definen entre un par de llaves { } , son separados mediante punto y coma ;

Top-level statements

Son declaraciones que solo se pueden usar en la parte superior de la hoja de estilos

  • Imports
  • Definici贸n de un Mixin
  • Definici贸n de una Funci贸n
  • M贸dulos

Universal statements

Son statements que podemos usar en cualquier parte de la hoja de estilos.

  • Variables, estructuras de control y las reglas @error, @warn y @debug.
  • Declaraciones CSS: Reglas de estilo, At-rules y Mixis.

Variables

Es un espacio de memoria asignado en memoria y 煤nicamente puede almacenar un dato.

  • Las variables pueden ser declaradas en cualquier parte de la hoja de estilos.

Para asignar un valor a una variable se hace uso del simbolo $ de esta manera es posible referenciar dentro de la hoja de estilos.

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

body{
    margin: 0;
    padding: 0;
}

Diferencias en Variables en CSS y SASS

CSS Variable Sass Variables
Pueden tener diferentes valores para distintos elementos Tienen un valor 煤nico correspondiente a un elemento
Son declarativas Son imperativas (en el momento en el que actualicemos el valor de nuestra variables va a cambiar en autom谩tico)

!default flag

Se encarga de asignar un valor a la variable si y solo si esa variable no esta definida o su valor en null.

Ojalas veamos como modularizar c贸digo 馃槃

Algo interesante que vi o que fue diferente a lo que esperaba es que al crear las variables en sass, al compilarse tambi茅n se crearan o intentara crearlas en el archivo CSS pero no lo hace.

Al usarse dentro de Sass, lo que hace en CSS es indicar 煤nicamente el color
.

Este es el link del la tipograf铆a para a帽adir en el HTML: <link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap鈥 rel=鈥渟tylesheet鈥>

He de decir que la landing page es muy bonita. Si te pas贸 como a mi y no encontrabas el link a figma, aqu铆 lo tienes: https://www.figma.com/file/Em1aDiIHmqozHpUAjsYhT7/Eco-Store-Mockups-(Copy)?node-id=0-1&t=xqtULKy5UPfvz8kx-0
.
Tambien recordar que hay cursos sobre esta herramienta aqu铆 en Platzi y que pueden ser muy utiles para comprender la parte de UX/UI como front end developers.

Pagina para las fuentes : Google Fonts
.

  • Codigo en html
<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;500;700&display=swap" rel="stylesheet">
  • C贸digo en sass
$primary-color:#FFEFE7;
$secundary-color:#FFDAC6;
$tertiary-color:#BABD8D;
$primary-text-color:#7C6A0A;
$font-stackl: 'IBM Plex Sans' , sans-serif; 

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

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

Declaraci贸n de Variables

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

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

.

Diferencias en Variables en CSS y SASS

.

CSS Variable Sass Variables
- Pueden tener diferentes valores para distintos elementos - Tienen un valor 煤nico correspondiente a un elemento
- Son declarativas - Son imperativas

!Default flag Se encarga de asignar un valor a la variable si y solo si esa variable no est谩 definida o su valor es NULL.-

**Se ve muy poderoso SASS. combinado con design systems y buenas practicas de BEM, podriamos tener un codigo mucho mas fino y optimizar el workflow 鉂わ笍 **

Me encanto esta clase. Vamos por m谩s.

Hola, estoy haciendo un proyecto antes el container y la imagen se quedaban estaticas en el navegador de chrome, si yo hacia moverme hacia la izquierda con el mouse me deja en la misma posici贸n e igual hacia la derecha pero ahora no se que paso que si yo lo muevo hacia la derecha con el mouse pareciera como si el width su hubiera aumentado un que yo no le movi nada, a que creen que se deba? espero y me puedan ayudar, saludos.

Diferencias entre variables declarativas y variables imperativas:
Las variables declarativas de CSS s贸lo se definen una vez, es decir, su valor no puede cambiar.
En cambio, las variables imperativas de SASS pueden tomar un valor diferente al asignado al principio, adem谩s de que se pueden hacer operaciones aritm茅ticas con ellas.

Archivo 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;
}