Funciones

Clase 33 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.

Jair Neri

student•

Estaba repasando los videos sobre funciones y mixins ya que no me quedaba muy claro la diferencia. Hasta que se me vino a la mente una analogia, espero que sea correcta, sino igual apreciaria sus comentarios o sugerencias.

"Las funciones son usadas para transformar o modificar valores y pasarlos a las propiedades. Son herramientas de transformación, para las propiedades.

Mientras que los Mixins aunque tambien pueden hacer esto, su funcion es replicar bloques de codigo para construir de forma procedural.

Bernardo Aguayo Ortega

student•

me encanta!

Gabriel Escribá

student•

Buenisima definicion

Ivan Sangueza Alarcon

student•

Si tienen el error del "Cannot read property 'r' of undefined" pongan llaves les puede servir para no estar perdiendo tiempo

opacidad(color, cantidad){
    alpha(color, cantidad)
}

Fredy Frasser

student•

Gracias me salia el error tambien

Addi Alberto Salazar Espinosa

student•

Gracias por el dato! :D

Jhean Pacheco

student•

Al igual que en sass tenemos la función @extend que nos ayuda a implementar las propiedades de otro elemento:

.message {
	padding: 10px;
	border: 1px solid #eee;
}
.warning {
	@extend .message;
	color: #E2E21E;
}

Manuel Alejandro Aguilar Téllez Girón

student•

Gracias por tu aporte. Eso viene en el examen de Sass y no lo sabía. :D

Addi Alberto Salazar Espinosa

student•

Super! :D

Francisco Contreras

student•

También funciona si mandamos a llamar la función alpha directamente:

        li
            list-style: none
            color: alpha(color-primario, .30)
        span
            margin-left: 10px

stylus es genial!!!!!

Addi Alberto Salazar Espinosa

student•

Wow :O buen dato

Hans Arango

student•

Genial esta solución si me funcionó, gracias.

Florencia Urquiza

student•

En el módulo de cajas.styl hay un error: luego del span no es height es h3. Se le auto completó al profesor y no se ha dado cuenta!

Luis Angel

student•

Entonces la sugerencia sería eliminar el height y dejar lo demás como está solamente

Jhonatan David Ibarra Lavado

student•

pueden llamar los archivos sin la extencion :V

Miguel Angel Reyes Moreno

student•

Y también puedes escribir sin el pacman.

Addi Alberto Salazar Espinosa

student•

Irving Juárez

student•

Diferencia entre un mixin y una funcion

Estas se suelen confundir seguido. En Stylus incluso mas porque las dos son muy similares de declarar. La principal diferencia es que en un mixin, nosotros agregamos los estilos que va a llevar un elemento, tal como una <section> o un <div>, mientras que una funcion solo devuelve un valor, no una serie de ellos. . Una manera de entenderlo facilmente es que un mixin nos da los estilos para hacer un header (por ejemplo), donde nosotros ya declaramos el color, los bordes, el tipo de letra, posicionamiento, etc. Por otro lado, la function solo nos da UN valor que se agrega a una propiedad de un elemento. Las funciones se utilizan para declarar el box shadow de una caja, por ejemplo, en donde hacemos lo siguiente

.caja{
  box-shadow: function(valor1, valor2, valor3)
}

Con un mixin, nosotros hacemos esto:

.caja{
  mixin()
}

Fray David Pineda Anaya

student•

http://stylus-lang.com/docs/bifs.html

Addi Alberto Salazar Espinosa

student•

Gonzalo Pimentel

student•

Lo que noté en Stylus a diferencia de Sass es que para importar moludos de stylus con el @import tienes que escribir la ruta completa de donde se ubica tu archivo por ejemplo:

En cambio en Sass no tenías que poner la ruta completa, solo era:

Agustina Corvo

student•

La extensión .styl no es necesaria en el import pero sí el guión bajo, como bien indicaste.

Luis Angel

student•

De hecho, en ninguno necesitas poner la ruta completa, ambas son rutas relativas. Lo que notaste es que en Saas no necesitas poner la extensión del archivo que estás importando, lo cual tampoco es cierto. Si haces la prueba, podrás importar cualquier archivo de Stylus sin llamar a su extensión (.styl) al igual que con Saas, al día de hoy 31/08/2021.

CRISTIAN BARBERO PÉREZ

student•

Todo este código:

opacidad( color, cantidad )
    alpha(color, cantidad)

Puede ser sustituido por:

opacidad = alpha

Ya que lo único que se está haciendo es renombrar la función, no se está cambiando su funcionamiento.

En el siguiente enlace se encuentran muchas otras funciones predefinidas, como light o dark, a las que se les pasa un color como parámetro y te devuelve verdadero o falso según sea un color oscuro o claro.

https://stylus-lang.com/docs/bifs.html

Eduardo Daniel Flores Palomino

student•

Alguien me puyede explicar bien, lo de función dentro de una función. Para que sirve? Cómo se usa. No entendí

Irving Juárez

student•

Lo que pasa es que nosotros estamos creando una funcion que se llama opacidad. El detalle yace en que ya existe una función por defecto en Stylus que hace lo que nosotros queríamos hacer, la función por defecto se llama alpha. . Entonces, lo que hicimos fue crear una función que pase como parámetros los valores que utiliza la función por defecto. Por lo tanto, nuestra función opacidad solo llama a la función por defecto alpha. Una función dentro de una función...

Carlos Roberto Villatoro Barrios

student•

Hasta la documentación de Stylus es mucho más fácil de entender, creo que me convierto en fan de stylus aunque me creo capaz de adaptarme a cualquiera de las 3

Fabian Bardecio

student•

También estoy recibiendo el error "Cannot read property 'r' of undefined" Lo tengo bien indexado y no funciona :/ Me falló stylus, si en tan poco tiempo de uso me tira un error sin sentido, ni me imagino usándolo en grandes proyectos.

LUIS ESTEBAN ORDOÑEZ ERAZO

student•

Yo también lo tenía y me di cuenta que era un problema de identacion, por alguna razon VS code no reconcía correctamente el tab. Intenta borra las lineas de codigo de la funcion, reinicia el programa e intenta de nuevo.

Sino puedes descargar el archivo guia del profesor y hace copy y paste del código de la función

Mauro Alejandro García Larios

student•

En VS Code puedes revisar abajo a la derecha, hay una opción que bien puede decir "Spaces" o "Tab Size", al darle click te va a dar las opciones de "Indent Using Spaces" o "Indent Using Tabs" y al elegir también configuras el numero de espacios que quieres, eso me ayudó mucho para las cuestiones de indentción

Miguel Angel Lozano Alvarez

student•

Me gusta la playera que trae el profe :v

Cesar Santiago Guzman Prada

student•

Hola chicos, no es necesario colocar la extension de .styl

Andres Velasquez

student•

Aquí pueden encontrar más a cerca de las funciones preestablecidas de Stylus-Lang:

BUILT-IN FUNCTIONS

Jhon Alexander Romero Gonzaga

student•

Las mixins tambien sirven para hacer reglas en los estilos, me explico con un ejemplo, si tengo un objeto llamado breakpoints:

$breakpoints: (
	&quot;sm&quot;: 0,
	&quot;md&quot;: 560px,
	&quot;lg&quot;: 720px,
	&quot;xl&quot;: 1200px,
	&quot;xxl&quot;: 1400px
)

y quiero hacer un mixin donde me diga de forma ascendente que el proximo valor tiene que ser mayor al anterior, si esto se cumple no hay problema, pero en caso de que no se cumpla, quiero que me imprima en cosola que hay un problema con la regla establecida:

@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null or unit($num) == &quot;%&quot; or unit($prev-num) == &quot;%&quot; {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn &quot;Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !&quot;;
    } @else if $prev-num &gt;= $num {
      @warn &quot;Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !&quot;;
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

esto les ayudara a crear reglas entre sus equipos para que mantengan el orden

Roman Augusto Tacconi Barraza

student•

buenas, tengo un problema, prepos me tira error luego de hacer lo de la función, el error es " Cannot read property 'r' of undefined " y la ubicación es en ejercicio-stylus.styl pero me pone las líneas del código de la función..

no se si se ve la captura

Luis Gerardo Colmenares

student•

Me pasa lo mismo. Desconozco muy bien la razón pero al usar "{}" en la función "opacidad", se resuelve el problema y Prepros compila sin problemas.

Daniel Ruiz

student•

Sabes cual es la razon de que solo funcione con llaves?

Gutierrez Diego

student•

Como utilizo Zeplin, ya lo descargue y no encuentro la manera de anexar un archivo a Zeplin para poder ver todas sus configuraciones?

bruno guerra solano

student•

por que no se utiliza el "_" para modularizar el trabajo es que en stylus por defecto el preprocesador no lo transforma en css

Alex Camacho

teacher•

Cuando indicamos el nombre de un archivo con _name.styl se indica que esto en un modulo y por lo tanto no se procesará a un archivo ,css

Luis Lira

student•

Si te refieres a que por qué el profesor no lo usa, simplemente es por motivos didácticos del curso. Y también dependerá si tú quieres tener todo en un solo archivo al final o dividirlo en varios :)