A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Variables

24/42
Recursos

En las variables almacenamos datos que se puede reutilizar en todas nuestras hojas de estilos. As铆 evitamos tener que escribir lo mismo una y otra vez cuando se realiza alg煤n cambio, ya que s贸lo vamos a modificar el valor de la variable y se aplicar谩 a todos los lugares donde sea usada.

Com煤nmente almacenamos en variables las gu铆as de estilo de nuestro sitio, como pueden ser los colores y fuentes.

Aportes 35

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En sass hay dos maneras de escribir la sintaxis, la primera es con la extensi贸n 鈥.sass鈥 que se obvia los 鈥渰 }鈥 y el " ; ", y la otra es con la extensi贸n 鈥.scss鈥 que es igual que escribir css con 鈥渰 }鈥 y " ; " .
.sass es la manera vieja.
.scss es la nueva manera.

Me comenzaron a gustar los pre procesadores hace que escribir css y html sea mas sencillo a mi parecer

A diferencia de Less, donde las variables inician con un arroba (@), en Sass las variables inician con un s铆mbolo de pesos, como en PHP ($).

Prepos es una herramienta muy util, con esta nos evitamos la instalacion de en este caso sass para poder compilar nuestro codigo directamente sin necesidad del server de prepos, esto se hace desde la terminal de la siguiente manera.
si estas en linux puedes instalar sass con el siguiente codigo
$sudo npm install -g sass
verificamos la version instalada con $sass -version

luego desde la terminal vamos a la carpeta donde esta ubicado nuestro proyecto y escribimos el siguiente comando
$ sass ./鈥漬ombre del arvhivo鈥.scss ./ 鈥漬ombre del arvhivo鈥.css verificamos que todo este bien porque se creara un archivo llamado style.css.map y otro llamado style.css

para mas claridad ir a la documentaci贸n de sass

FIGMA > ZEPLIN

Buenas practicas tomadas de esta clase

  • Antes de nombrar a un bloque de c贸digo, hay que pensar si ese bloque nos servir谩 para futuras ocasiones, como en el caso de 鈥淪eguidores鈥 en nuestro proyecto de este curso. Si el bloque si nos servir谩 en futuras ocasiones, entonces no hay que nombrar con la metodolog铆a BEM, ya que eso puede romper ciertas partes de c贸digo en otros archivos html. Eso nos ayuda con la modularizar铆an y la reutilizaci贸n de c贸digo.
  • Las variables deben ir hasta arriba
  • Los nombres de las variables tienen que ser gen茅ricos, tales como fuente1, color-primario, etc. Esto es porque estas variables pueden cambiar. Y teniendo un nombre gen茅rico, no nos vamos a confundir al momento de cambiar una variable.

Variables Less = @
Variables SASS = $

Aqu铆 empieza a explicar porque usar variables y como!

Pro-tip

Trata de experimentar con los cambios de tu pagina desde el navegador, asi ya cuando te guste alg煤n color de fondo o de letra, ya haces el cambio permanente en tu documento sass y lo compilas.
As铆 va quedando mi pagina hasta ahora

## Variables

---

```css
// Asi se declaran variables
$Fuente1:'Lato',sans-serif;
$Fuente2:'Oswald',sans-serif;
$color-primario:#333333;
$color-claro:#FFFFFF;
$color-secundario:#8841DA;
$color-variacion:#3F579A;

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: $Fuente1; // Asi como se usan
}

La mejor pr谩ctica a la hora de nombrar variables es asignarles un nombre de acuerdo a su funci贸n, por ejemplo:

鉂 $Fuente1
鉁 #font-titles
.
鉂 $Fuente2
鉁 #font-text
.
鉂 $color-secundario
鉁 #background-color

Esto por que puede que necesitemos el mismo color en varias partes, luego si necesita ser cambiado puede que no quede bien en algunas partes, tambi茅n con esto sabr铆as exactamente que cosas se ver铆an afectadas cuando cambies el valor de esas variables.

Consejo del curso de dise帽o en modo oscuro de platzi 馃憤

SASS es genial, lo he usado con anterioridad y es genial!

No me gustaba la idea de los prepos pero me estan gustando mucho y en especial Sass, siempre hay que tener la mente abierta a nuevas cosas para aprender 馃槃

M谩s informaci贸n sobre el alcance de las variables en sass ver.

Que bueno sass y less de momento me gustan los dos.

C贸mo llamar a una variable en Sass?

Facil, del mismo modo en que se creo:

$fuente3

asi la llamas

Ejemplo:

font-size: $fuente3;

C贸mo crear una variable en Sass?

Sencillo, usando $ pones el nombre : valor a asignar.

$fuente3: 50px;

jejeje Platzi parece una pi帽ata pues tiene mas de tres

Estas clases son super f谩ciles de entender. El profesor hizo buen ejemplo de como utilizar las variables.

Una pregunta, 驴El definir las variables de colores con min煤sculas y las de fuentes con may煤scula inicial es parte de una buena pr谩ctica? Ya he visto que en el m贸dulo de Less tambi茅n llam贸 las fuentes con may煤scula inicial

excelente el uso de variables, me esta gustando mucho sass, pero no veo diferencia con less.

De momento Sass es el preprocesador que me gusta m谩s!

Vamos super bien 馃槃

$

Cada vez mejor

Las variables en SASS empiezan con $
Por ejemplo $Fuente1: 'Lato', sans-serif; y aplicando la variable a un selector:

body {
	margin: 0;
	font-family: $Fuente1;
	}

Me gusta! 馃槃

Se declaran variable en SASS con el signo 鈥$鈥 tal y como:
$color1:#FFF;
Y se llaman de la misma manera que se nombran
h1{
color:$color1;
}

Ahorra mucho trabajo lo de las variables

Se declaran con 鈥$鈥

$fuente1: 'Lato', sans-serif;
$fuente2:'Oswald', sans-serif;
$color-primario: #333333;
$color-claro: #FFFFFF;
$color-secundario: #8841DA;
$color-variacion: #3f579a;```


Y se llaman as铆:



font-family: $fuente1```

Falto agregar en el h3 y span, aunque en la pr贸xima clase lo hace.

color: $colorPrimario;

鈥渆n mi caso yo declare la variable con ese nombre鈥

Las variables siempre ser谩n fundamentales para cualquier lenguaje de programaci贸n y su uso no es tan dif铆cil.

Es posible que CSS nativo traiga incorporada todas las funcionalidades de los preprocesadores , en el futuro ?

a conforme va, espero que con los mixins elimine varias de esos atributos de mas XD
que por cierto no se puede llamar dos selectores a la vez con la coma??