A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Funciones

27/42
Recursos

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.

Aportes 42

Preguntas 3

Ordenar por:

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

Vaya, tratare de que todos mis proyectos lleven SASS, es mi favorito. 馃槂

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

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

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);
}

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

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

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

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.

Declaracion

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

Llamado

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

En esta clase se uso solo una funcionalidad de SASS, que es el rgba, pero si buscan en la documentacion original, existen muchas como usar colores con HSL(), obtener la saturacion de un color, saturation(), etc

https://sass-lang.com/documentation

Genial poder manipular css casi como si fuera Js

Excelente Sass! Suma mucho.

El ejemplo de esta seccion seria sobrescribir una funcion global de Sass, aqui esta un screen, donde colocas el color= color, y el alpha = nivel que es la opacidad

Aqui la documentacion oficial de Sass:
https://sass-lang.com/documentation/modules

Perfectoo

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.

Los mixis de sass tambi茅n puede recibir par谩metros, me decepciono bastante que no lo dijera, pues es de las cosas mas 煤tiles a la hora de trabajar con este.
Aqu铆 mas informaci贸n acerca: https://sass-lang.com/documentation/at-rules/mixin

Y aqu铆 la lista de todas las funciones nativas de sass: https://styde.net/lista-completa-de-funciones-nativas-de-sass/

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);

}

Resumen:

  • Tanto los mixin y las funciones tienen la posibilidad de ayudarnos a reducir el c贸digo redundante.
    Siendo mixin replicadores genericos de un estilo determinado
    y las funciones aplicando estilos de manera especifica. Siendo esto 煤ltimo lo que las diferencia radicalmente.

Para llamar a la funci贸n en donde queremos, definimos antes la propiedad y hacemos:

propiedad: nombre-funci贸n(par谩metros);

Recordar que los par谩metros pueden ser variables tambi茅n. Ej:
propiedad nombre de la funcion parametros
color: get-opacity ($color-blanco);

Todo junto quedar铆a:

color: get-opacity($color-blanco);

Las funciones en Sass son parecidas a los mixin, ya que ambos pueden acceder a variables globales que est茅n declaradas en el archivo y pueden aceptar argumentos; sin embargo, una de las diferencias principales es que para declarar una funci贸n se debe utilizar la palabra @function seguida del nombre de la funci贸n que queramos declarar, y entre par茅ntesis podremos pasar los argumentos que necesite nuestra funci贸n. Adem谩s, al terminar de crear nuestra funci贸n, es necesario utilizar un @return seguido de lo que retornar铆a despu茅s de su ejecuci贸n.

Ejemplo:

@function numero($num: 500px){
  @return  $num/2;
}

B谩sicamente la diferencia es que el mixin te devuelve todo el contenido, mientras que las funciones solo devuelven lo que se帽alemos en el return. 馃槃

Ya comienzo amar Sass xD

Lo siento por los fans de Saas pero por el momento me quedo con Less (habr谩 que ver como es Stylus).

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

#TeamSass鉁屸湆

Por el momento me llama mas la atencion less馃

En foto principal era &__foto鈥損rincipal ya que esta va llevar una variaci贸n

Excelenteeeee!!

Estas clases son demasiado geniales, los procesadores son una herramienta de mucha ayuda para la simplificaci贸n y mejoramiento de nuestro c贸digo

Yo empece a usar Stylus antes de que @leonidas de los cursos de stylus en Platzi, pero me quedo con SASS鈥

Muy interesante! 馃槃 Me agrada

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

excelente clase, me esta gustando mucho sass y el curso

Diferencia entre funci贸n y mixin

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: 鈥渆l color al cu谩l se le a帽adir谩 la opacidad鈥, 鈥渘ivel de opacidad entre 0 y 1鈥)鈥 es redundancia.

Una cosa de locos

Las declaramos asi:


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

Y las llamamos asi

color: get-opacity($color-claro, .50);

Tambi茅n pueden omitir la extensi贸n del archivo.

j