Variables

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 ./”nombre del arvhivo”.scss ./ ”nombre 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 “Seguidores” 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 👍

Algunos enlaces útiles
https://sass-lang.com/documentation
https://sass-lang.com/guide

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;

“en 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??