Variables

Resumen

Las variables son elementos que podemos definir y asignarle un valor específico. En el caso de nuestro proyecto PlatziMusic tendrá algunas modificaciones. Para eso podemos usar las variables en los preprocesadores.

Sergio Toshio Minei

student•

Variables

Las variables son una forma de almacenar la información que se desea reutilizar a lo largo de la hoja de estilo.

Se puede almacenar cosas como colores, pilas de fuentes o cualquier valor de CSS que que se desea reutilizar. Sass usa el símbolo $ para hacer que algo sea una variable.

Aquí hay un ejemplo:

$font-stack: Helvetica, sans-serif
$primary-color: #333

body {
  font: 100% $font-stack
  color: $primary-color
}

BEM — Block Element Modifier o Modificador de Bloques de Elementos

Como su nombre indica, BEM distingue claramente 3 conceptos: el Bloque, el Elemento y el Modificador.

Escapar una variable

Para escapar una variable se usa el comodín #.

Esto es necesario en casos como, por ejemplo, cuando la variable está rodeada por comillas y de no ponerse el escape la variable pasaría como una cadena de caracteres…

$size: 10;

div {
  content: "#{$size}"
}

Pueden ver el resumen completo del curso aquí

Harold David Avila Sabogal

student•

Muchas gracias por tu resumen

Carlos Sanguino

student•

Muchas gracias

Jean Michael Courtois

student•

En el video anterior hablaba un poco de la estructura de archivos que puede tener un proyecto en Sass. Este artículo está muy bien para precisamente eso: http://thesassway.com/beginner/how-to-structure-a-sass-project

Héctor Eduardo López Carballo

student•

Pro-tip

. Si en VSCode usas el atajo ctrl + space key te saldrá el recuadro de sugerencias. .

Adrián Antañón

student•

Muchas gracias por el consejo!

Miguel Angel Reyes Moreno

student•

Eso lo hace cualquier IDE jajaja

Simón Arenas

student•

ITCSS, el triángulo invertido que facilita el trabajo con las hojas de estilo CSS

Francisco Imanol Suarez

student•

Es algo muy interesante ver como funcionan y como nos permite trabajar con las variables !

$color-brand: #ea83ee;
$color-secondary: rgb(219, 216, 121);

$color-black : rgb(0,0,0);
$color-darkgrey : #4d4d4d;
$color-grey : #737373;
$color-lighgrey : #bfbfbf;
$color-white : white;

Joel Vicente Nieto Gómez

student•

Gracias por compartir!.

Jose L. Figueroa

student•

Gracias por compartir!!!!

Juan C Felizzola

student•

Piense en las variables como una forma de almacenar la información que desea reutilizar a lo largo de su hoja de estilo. Puede almacenar cosas como colores, pilas de fuentes o cualquier valor de CSS que crea que desea reutilizar. Sass usa el símbolo $ para hacer que algo sea una variable. Aquí hay un ejemplo:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Johan Marcel Fernandez Castillo

student•

Buen resumen. 👍

Harold David Avila Sabogal

student•

Muchas gracias por tu resumen

Billi Ramirez

student•

Se imaginan tomar un proyecto ya iniciado y toca cambiar un color o una fuente? Si no hicieramos uso del pre-procesador perderíamos mucho tiempo buscando donde reemplazar. Por eso, es recomendable usar variables en pre-procesadores.

Harold David Avila Sabogal

student•

Muchas gracias

Julio César Noguera López

student•

sass-lang.com/documentation/ aquí la documentación de Sass

Harold David Avila Sabogal

student•

Muchas gracias

Enrique Devars

teacher•

Si quieren generar una paleta de colores y exportarla a sass les dejo este enlace de adobe color

Nicolas Restrepo

student•

si están usando live scss compiler en vscode y les molesta que se abra la consola cuando están haciendo cambios, abran los settings de vscode y agreguen esto:

"liveSassCompile.settings.showOutputWindow": false,

Juan Pena Verdú

student•

Documentación de Sass https://sass-lang.com/documentation/

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

John Agudelo

student•

https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4

Miguel Angel Lozano Alvarez

student•

Terminando este curso are un blog con Sass haber como queda me basare en uno que ya tenia hecho.

Luis Alejandro Vera Hernandez

student•

Si es un buen uso de las variables?

$black: rgb(0,0,0);
$dargrey: #4d4d4d;

Me parece que si dado el caso se cambian los colores ya no precisamente seran $black o $drakgrey y habria igual que buscar cada nombre de variable para cambiarles por el color al que se ha actualizado 🤨

Francisco Ezequiel Ferreyra

student•

¿Se ve algo de BEM en este curso?

Eduardo Reyes

student•

Para la parte de comentarios. Si usan /* comentario */ ese va a renderizar en el CSS, si usan // comentario solo se queda en el scss.

Fernando Galdós

student•

Declarar Variables con $

// Branding Color
$color-brand: #ea83ee;
$color-secondary: rgb(210, 216, 121);

$black: rgb(0,0,0);
$dargrey: #4d4d4d;
$grey: #737373;
$lightgrey: #bfbfbf;
$white: rgb(255,255,255);

Onasis Gonzalo Soto Castro

student•

Consulta: Que consejo me darían si tengo una paleta de gris , como llamarían las variables… $color-gray_1…$color-gray_2… ? cual seria una buena práctica ?

Diego Forero

Team Platzi•

Puedes usar _principal, _secondary, etc. Creo que los números se prestan a confusiones y probablemente es más difícil recordar cual es el tono del color, con los nombres me parece más sencillo

Imderf Rios

student•

Lo haría de la siguiente forma para los claros: $color-gray-lighten_1 $color-gray-lighten_2 $color-gray-lighten_3 y oscuro $color-darken_1 $color-darken_2 $color-darken_3

Gerardo Manuel Reyes Fernández

student•

En nuestros proyectos con Sass primero se importan las variables por que si la requerimos en algún lado la variable tiene que estar definida
$variable: valor;

Perla Godinez Castillo

student•

yo lo uso con bootstrap pero hice mis variables y no las reconoce

Daniel Esteves

student•

¡Hola Perla! ¿Podrías mandarnos una captura o poner un extracto de código en los comentarios para saber que error podría ser y ayudarte?

Variables

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales