En React se pueden utilizar archivos scss directamente sin convertirlos en css, desde JavaScript se generan los estilos en automático. Es algo útil.
Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 25
Preguntas 4
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;
}
Algunos statements contienen bloques y se definen entre un par de llaves { } , son separados mediante punto y coma ;
Son declaraciones que solo se pueden usar en la parte superior de la hoja de estilos
Son statements que podemos usar en cualquier parte de la hoja de estilos.
Es un espacio de memoria asignado en memoria y únicamente puede almacenar un dato.
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;
}
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) |
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
.
<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">
$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.
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”>
Una variable es un espacio asignado en memoria y únicamente puede almacenar un dato.
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;
.
.
CSS Variable | Sass Variables |
---|---|
- Pueden tener diferentes valores para distintos elementos | - Tienen un valor único correspondiente a un elemento |
- Son declarativas | - Son imperativas |
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;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?