No tienes acceso a esta clase

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

Estructura de la hoja de estilos y variables

4/20
Recursos

Aportes 24

Preguntas 4

Ordenar por:

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

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鈥>

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.

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

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
.

Ojalas veamos como modularizar c贸digo 馃槃

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.

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.

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

Les incomoda esto:

As铆 se puede quitar:

Quiz谩s es cosa mia, pero no puedo encontrar el link a figma dentro de los recursos, alguien lo tiene??

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鈥>

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
Se puede usar @import para llmar las tipograf铆as? o tengo que poner imperativamente el link en en html. Justo me gustar铆a dejar todos los estilos en una hoja, para poder manipularlos en el mismo lugar
Creo que no est谩 muy claro la diferencia entre las variables declarativas de CSS y las variables imperativas de SASS 馃

Aprender a utilizar variables para reutilizar valores en todo el proyecto es una pr谩ctica que definitivamente aplicar茅 en mis futuros proyectos.

Hola! Dejo este aporte en las clases, b谩sicamente podemos asignar a una variables diferentes propiedades para usarlo en todo nuestro proyecto, haciendo m谩s legible nuestro c贸digo

	$font-weight: (
		"normal": 500,
		"bold": 900
	);

Luego en tu archivo podr铆as hacer

	h1 {
		font-size: 35px;
		font-weight: map-get($font-weights, bold);
	}

Hay otras formas de realizar esto, esta soluci贸n es usando prepros e importando primero el archivo de variables y luego el archivo header, estos archivos son por poner un nombre a mis archivos imaginarios

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

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