Estructura de la hoja de estilos y variables

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=“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”>

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

!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=“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”>

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

.

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