Variables
Clase 24 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Jhon Alexander Romero Gonzaga
student•
hace 6 años
Maricruz Pizaña Solano
student•
hace 6 años
Raycris Maldonado
student•
hace 5 años
Clase 24 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Jhon Alexander Romero Gonzaga
Maricruz Pizaña Solano
Raycris Maldonado
Gonzalo Pimentel
Maricruz Pizaña Solano
Omar Gabriel Aguilar Moscoso
John W. Martínez
Brandon Argel Verdeja Domínguez
Luis Miguel Valencia Estrada
Franklin Peñafiel
Irving Juárez
Rodrigo Reyes
Omar Gabriel Aguilar Moscoso
Irving Juárez
Omar Gabriel Aguilar Moscoso
Irving Juárez
Ariel Maglio
Jesus Federico David Herrera
William David Arias Gomez
Kevin Andres Curruchich Xocop
Fabian Flores
Kevin Andres Curruchich Xocop
Jesus Federico David Herrera
Juan Pablo Celiz
Armando Chindoy
Jesus Federico David Herrera
Raúl Adolfo Sánchez Rodríguez
Andres Velasquez
Lucia Machado
Jonathan Amaya Mendieta
Edwin Alberto Guerrero Acosta
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
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.
Muchas gracias por la información
excelente aporte, muchas gracias Jhon
Me comenzaron a gustar los pre procesadores hace que escribir css y html sea mas sencillo a mi parecer
Estoy totalmente de acuerdo contigo.
si less>sass
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 ($).
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 👍
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
Lo que me gustó de prepos es que cuando comparé con less se generaba automáticamente los - webkit-, -moz-, -o -que muchas veces tengo problemas. La terminal no me genera esos códigos y en iphone es cuando más resaltan errores por falta de los códigos que indico
Buenas practicas tomadas de esta clase
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 = $
FIGMA > ZEPLIN
Creo que Zeplin ya no se usa, o si?
No mucho
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
Aquí empieza a explicar porque usar variables y como!
## 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 }
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 :D
Siempre hay algo nuevo por aprender 😁
Algunos enlaces útiles https://sass-lang.com/documentation https://sass-lang.com/guide
Gracias, me servirán mucho 👌
Variables
// 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 }
Por lo menos en SASS así es, en otro preprocesadores puede variar 😉
La seccion de estaditicas si se va a utilizar mas veces en otras paginas no seria mejor ponerlo en un mixins?
En realidad podria ponerlo en otro archivo para hacerle un import o usar mixin
Cómo llamar a una variable en Sass?
Facil, del mismo modo en que se creo:
$fuente3
asi la llamas
Ejemplo:
font-size: $fuente3;
En el primer módulo pensé que iba a ser super dificil, pero ahora me está gustando mucho!
SASS es genial, lo he usado con anterioridad y es genial!
Más información sobre el alcance de las variables en sass ver.
Gracias! :D
Muchas gracias Edwin