Variables y estructura de hojas Sass

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Contenido del curso

Conociendo SASS

Instalación y configuración del entorno de trabajo

3
Instalación y Configuración de SAS en Visual Studio Code
07:53 min

Reglas y uso

Expresiones

8
Expresiones en CSS: Números, Strings, Colores y Booleanos
03:47 min

Proyecto: sección main

9
Sección hero con Flexbox y Sass
26:58 min

Herencia en SASS

Mixins

Funciones

15
Operadores y Funciones en SAS: Uso y Ejemplos Prácticos
03:40 min

Proyecto

Deploy

19
Publica tu sitio web gratis con GitHub Pages
02:24 min

Extras

20
Instalación y Configuración de Sass con Node.js
01:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:43

Variables y estructura de hojas Sass

Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Clase 4 de 20

Clase 4 / 20

Recursos

Las variables en Sass son espacios de memoria que almacenan un dato y permiten reutilizar valores como colores o tipografías en toda tu hoja de estilos. Aprenderás a declararlas, diferenciarlas de las variables CSS y aplicarlas en un proyecto real con Figma y Visual Studio Code. Es ideal si ya escribes CSS y quieres dar el salto a un flujo más ordenado y mantenible.

Cómo se estructura una hoja de estilos en Sass

Una hoja de estilos en Sass se construye con statements o declaraciones que siguen un orden específico. Algunos contienen bloques delimitados por llaves y se separan con punto y coma.

Hay dos grandes grupos que conviene distinguir desde el inicio:

Top-level statements: solo pueden ir en la parte superior del archivo. Aquí entran los @import, la definición de un mixin, la definición de una función o el uso de un módulo.
Universal statements: pueden aparecer en cualquier parte del documento. Incluyen variables, estructuras de control, reglas como @error, @warn o @debug, declaraciones de CSS, reglas de estilos, at rules y mixins.

Esta jerarquía importa porque define dónde puedes colocar cada pieza sin romper la compilación [00:35].

Qué es una variable en Sass y cómo se declara

Una variable es un espacio asignado en memoria que almacena un único dato. En Sass puedes declararla en cualquier parte de la hoja de estilos, y para hacerlo necesitas el símbolo de pesos $ antes del nombre [01:25].

Un ejemplo directo con tres colores:

scss $primary-color: blue; $secondary-color: green; $tertiary-color: purple;

Ese $ es lo que te permite referenciar la variable más adelante en cualquier regla de estilos.

¿Cómo se declara una variable en Sass? Escribe el símbolo $, el nombre de la variable, dos puntos y el valor. Cierra con punto y coma. Ejemplo: $primary-color: blue;.

En qué se diferencian las variables de Sass y las de CSS

Aunque parezcan equivalentes, las variables de Sass y las de CSS funcionan distinto y eso cambia cómo las usas en un proyecto.

Las variables de CSS son declarativas y pueden tener diferentes valores para distintos elementos.
Las variables de Sass son imperativas y guardan un valor único por elemento. Si actualizas el valor, cambia en automático donde se haya usado.

Sass también incluye una flag llamada !default. Esta asigna un valor a la variable solo si aún no ha sido definida o si su valor actual es null. Es útil cuando creas librerías y quieres dar valores por defecto que el usuario pueda sobrescribir [02:45].

¿Para qué sirve !default en Sass? Asigna un valor a una variable únicamente si no ha sido definida antes o si es null. Permite definir defaults sin pisar configuraciones existentes.

Cómo definir la paleta de colores desde Figma

Antes de escribir código, conviene revisar la paleta en Figma para decidir qué colores merecen ser variables. La regla práctica: si un color se repite mucho, vale la pena guardarlo; si aparece una sola vez, no.

En el proyecto de ejemplo se identifican estos colores:

Un blanco amarillento que aparece en toda la página, ideal como color primario.
Un tono que se repite en las cards, candidato a color secundario.
Un verde usado en los títulos, que entra como color terciario.
Un naranja que aparece muy pocas veces y que no se convierte en variable porque su uso es marginal.

Este filtro evita inflar el archivo con variables que nadie va a reutilizar.

Cómo crear variables de color y tipografía en Visual Studio Code

La buena práctica es declarar las variables al inicio del archivo cuando se usan en todo el proyecto. Si el uso es local, también puedes declararlas dentro del bloque correspondiente.

Partiendo de los hexadecimales copiados desde Figma, la estructura queda así:

scss $primary-color: #f5f3e7; $secondary-color: #d9d2b6; $tertiary-color: #4a6b3a; $primary-text-color: #2b2b2b; $font-stack: 'IBM Plex Sans', sans-serif;

Nota un detalle importante: el cuarto color no se llama quaternary-color, sino $primary-text-color, porque su función real es dar color a los textos. Nombrar variables por su uso, no por su orden, hace el código más legible.

Cómo integrar la tipografía con Google Fonts

Para la tipografía se eligió IBM Plex Sans en tres pesos: regular, medium y bold. El flujo es directo:

Buscar la fuente en Google Fonts y seleccionar los estilos.
Copiar los <link> que entrega Google Fonts y pegarlos en el archivo HTML.
Copiar la regla font-family sugerida y guardarla en la variable $font-stack dentro del archivo Sass.

Con eso ya puedes referenciar $font-stack en cualquier selector sin repetir el nombre de la fuente [06:30].

Por qué resetear margin y padding desde el inicio

Un paso pequeño que ahorra horas de depuración: resetear los estilos base.

scss

{ margin: 0; padding: 0; }

Esto elimina los margin y padding que los navegadores aplican por defecto y que muchas veces aparecen sin que sepas de dónde vienen. Empezar con el lienzo limpio te da control total sobre el espaciado [07:45].

¿Y si necesitas colores específicos para una sección puntual sin contaminar el alcance global? Ahí entran las variables locales, que se trabajan en la siguiente clase. ¿Qué color crees que merece ser local en tu propio proyecto? Cuéntalo en los comentarios.

Jessica Silvia Payano Castro

Hace 3 años

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.

Nestor Rios Garcia

Hace 3 años

Gracias.

Comentarios (32)32 comentarios

Ángel Daniel López Vázquez

Frans Aguirre

Luis Ruiz

Bryan Andres Vera Garcia

Ana María Díaz

Profesor

Luis Tapia

Ulqernesh Karvenae

Joel Dominguez Merino

----- ----

Julia Gabriela Nieva Paredes

Rubén Vega

Pablo Alejandro Figueroa

David Limon

Hace 2 años

Gabriel Moreno

Guadalupe MoralesCarmona

Paula Inés Cudicio

Jesus Sierra

Nicolas Neira

Kenneth Angulo L

Hace 18 días

Octavio Alvarez Olan

Donovan RM

Carlos Rubén Díaz Gutiérrez

Platzi

Ramses jecsan

iecgerman .

Daniel Santiago Forero Torres

Hace un año

Luis Angel Castillo Vega

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

Conociendo SASS

Qué es Sass y por qué usarlo

Funcionamiento y ventajas de los preprocesadores CSS

Instalación y configuración del entorno de trabajo

Instalación y Configuración de SAS en Visual Studio Code

Reglas y uso

Variables y estructura de hojas Sass

Selectores y scope de variables en Sass

Estructura HTML y CSS para Proyectos Web en Visual Studio Code

Nesting y @rules de Sass en navbar

Expresiones

Expresiones en CSS: Números, Strings, Colores y Booleanos

Proyecto: sección main

Sección hero con Flexbox y Sass

Herencia en SASS

Herencia con @extend en Sass

Estilos de product cards con herencia CSS

Manipulación de Flexbox para Diseño de Tarjetas en CSS

Mixins

Uso de Mixins en SAS para Simplificar Estilos en CSS

Mixins de Flexbox con parámetros en SASS

Funciones

Operadores y Funciones en SAS: Uso y Ejemplos Prácticos

Proyecto

Sección "Por qué nosotros" con SASS y Flexbox

Estilos y Animaciones en Galerías con Figma y CSS

Sección Location y Footer con Sass

Deploy

Publica tu sitio web gratis con GitHub Pages

Extras

Instalación y Configuración de Sass con Node.js

Variables y estructura de hojas Sass