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 25

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

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

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

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.

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

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
![](https://static.platzi.com/media/user_upload/image-eb627c3d-e440-4d17-8d63-250cf03b2b7d.jpg)
En Sass, puedes definir gradientes como valores de variables, pero debes hacerlo utilizando la sintaxis correcta. Por ejemplo, puedes definir un gradiente para `primary-color` o `secondary-color` así: ```scss $primary-color: linear-gradient(to right, #ff7e5f, #feb47b); $secondary-color: linear-gradient(to left, #86a8e7, #91eae4); ``` Recuerda que al usarlos, tendrás que aplicarlos correctamente en las propiedades de CSS, como `background`. Utiliza Sass para facilitar la gestión de estilos en tu proyecto.
![]()![](https://static.platzi.com/media/user_upload/image-0c96c919-4701-446c-a21a-f9cce9c309f6.jpg)
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 ❤️ **

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