Funciones

Clase 27 de 42 • Curso de Preprocesadores CSS

Resumen

La diferencia entre mixins y funciones es que las funciones por general hacen cálculos y regresan un resultado que es usado como valor de alguna propiedad.

Wandy Rafael Santana Evangelista

student•

Vaya, tratare de que todos mis proyectos lleven SASS, es mi favorito. :)

Addi Alberto Salazar Espinosa

student•

Yo también :)

Maricruz Pizaña Solano

student•

Ya somos tres. ;)

Platzi Team

student•

Genial se debe aprender todo y en ese camino estamos, pero por el momento Team Sass

Wilson Delgado

student•

x2, es increíble

Addi Alberto Salazar Espinosa

student•

x3 #TeamSass

Efraín Hernández García

student•

En pocas palabras.... Los **mixins **nos ayudan a reutilizar código en otras partes y evitar hacer código muy repetitivo. Las **funciones **hacen un calculo y por lo general reciben un parametro y retornar un valor

Maricruz Pizaña Solano

student•

Cool, muchas gracias :D

Fernando Castelan

student•

Los mixins también pueden recibir parámetros y de hecho lo recomendable es usarlos solo cuando van a recibir parámetros, para los otros casos puedes usar herencia o placeholders

Mateo Ryhr

student•

La función hecha en el video no es un buen ejemplo.

Se declara una función con el fin de alterar la opacidad de un color que se pasa como parámetro.

@function get-opacity($color,$nivel){
    @return rgba($color,$nivel);
}

Pero dentro la función lleva otra función que ya realiza ese fin, por lo que hay una redundancia.

Se podría usar directamente la función

@rgba($color,$nivel);

Si no, vean este ejemplo. Sass

@function get-opacity($color,$nivel){
    @return rgba($color,$nivel);
}
body{
    background-color: rgba(#08d9d6,0.3);
    color: get-opacity(#08d9d6,0.3);
}

El anterior código da como resultado el siguiente CSS

body {
  background-color: rgba(8, 217, 214, 0.3);
  color: rgba(8, 217, 214, 0.3);
}

John Jairo Rodriguez Rivas

student•

pensé lo mismo, buscando documentación encontré otros ejemplos en donde si se da utilidad, porque si fue medio feito el ejemplo de la clase

Andres Tuiran Mendoza

student•

jaja sameee quede como... "Y por que no solo colocar color: rgba(etc etc), pero bueno la intencion fue enseñar como funcionaba jaja

Jordan

student•

1:04 min -> Atajo Duplicar Linea : SHIFT + ALT + ↓

Andres Velasquez

student•

Gracias!!

Never Andrés Aparicio Hernandéz

student•

sass es el mas utilizado así que me quedo con sass aunque falta styles que segun freddy en un video es el que utilizan en platzi

Angélica Rocha

student•

yo tengo una leve tendencia por Sass comparándolo con Less , aunque me gustan los dos.

Kevin Andres Curruchich Xocop

student•

No se con cual quedarme la verdad, creo que me gusta un poco mas Less 😅😅

Andrés Gómez

student•

@chiwy_6 Estuve indagando cuáles son los preprocesadores más usados en css los cuales están entre lees y Sass, siendo más relevante Sass, así que recomendaría estudiar los dos a fondo para poder ampliar tu margen de conocimiento

Jeferson Velásquez

student•

José Ángel Martinez Frias

student•

Hidetochi Junior

student•

buena

Anfernee Valera

student•

De verdad el ejemplo del profesor fue muy vago 🤔, Hay algún curso de platzi sobre SASS actualizado?

David Santiago Diaz

student•

Hola ✌ Platzi tiene un curso donde se profundiza en Sass:

👉 Curso de Sass

Espero haberte ayudado. 😉

Anfernee Valera

student•

El curso es viejo, me pregunto si estará desactualizado :/

José Luis Caicedo Lara

student•

mixin = comparte propiedades como color, border etc funcion = hace un cálculo y devuelve un valor o valores

Cristofher Jumbo Jimenez

student•

Vale pues la diferencia con los mixins, por lo que he entendido es que en el caso de las funciones podemos aniadir parametros, es decir, diferentes valores que nos permite obtener un diferente resultado dependiendo de estas ultimas.

En el caso del mixin, es como una variable que lo que hara es aniadir cierto codigo al elemento en question.

Lo veo como que las funciones son dinamicas y los mixins mas bien estaticos.

John Edward León Muñoz

student•

Mixins: Todas las declaraciones CSS que contenga, se aplicarán donde el mixin sea implementado.

Funciones: Solo lo que retorne la función, es lo que se aplicará donde sea implementado.

Addi Alberto Salazar Espinosa

student•

Buenos conceptos :D

Maricruz Pizaña Solano

student•

Gracias :D

Sebastian Heredia

student•

Declaracion

@function get-opacity($color,$nivel){
    @return rgba($color,$nivel);
}

Llamado

.perfil__minibo{
    color: get-opacity($color-primario, .20);
}

Raúl Adolfo Sánchez Rodríguez

student•

FUNCIONES EN SASS

Declarar de una función
Utilizar de una función

Julio Cesar Quintero González

student•

Creo que fue poco acertado el ejemplo de la opacidad del color porque ya eso es algo que hace rgba(pasándole ambos parámetros: "el color al cuál se le añadirá la opacidad", "nivel de opacidad entre 0 y 1")... es redundancia.

Héctor Aguilar Mogollan

student•

excelente clase, me esta gustando mucho sass y el curso

Kamerr Ezz

student•

asta ahora sass es el que mas me ah gustado y fecil :3

Alan Dromundo Arias

student•

No sé. Un poco redundante esta función de "get-opacity" (que a mi consideración quedaría mejor "set-opacity", o mejor aún "set-rgba") porque no se hizo algo diferente con la función que ya existe dentro de css. Me hubiera gustado que al menos agregaran un condicional para sacarle jugo a las funciones, pero no. Un poco decepcionado de esta clase la verdad.

Andres Velasquez

student•

Como definir una función en Sass:

Empezaremos por el nombre function, luego asignar un nombre descriptivo. function generar-opacidad despues entre () agregamos lo que vamos a recibir como parámetros lo que queremos que cambie; y finalmente retornamos los parametros que recibimos.

@function get-opacity($color, $nivel){
    @return rgba($color, $nivel);

}