Jair Neri
Bernardo Aguayo Ortega
Gabriel Escribá
Ivan Sangueza Alarcon
Fredy Frasser
Addi Alberto Salazar Espinosa
Jhean Pacheco
Manuel Alejandro Aguilar Téllez Girón
Addi Alberto Salazar Espinosa
Francisco Contreras
Addi Alberto Salazar Espinosa
Hans Arango
Florencia Urquiza
Luis Angel
Jhonatan David Ibarra Lavado
Miguel Angel Reyes Moreno
Addi Alberto Salazar Espinosa
Irving Juárez
Gonzalo Pimentel
Agustina Corvo
Luis Angel
CRISTIAN BARBERO PÉREZ
Eduardo Daniel Flores Palomino
Irving Juárez
Carlos Roberto Villatoro Barrios
Fabian Bardecio
LUIS ESTEBAN ORDOÑEZ ERAZO
Mauro Alejandro García Larios
Miguel Angel Lozano Alvarez
Cesar Santiago Guzman Prada
Andres Velasquez
Jhon Alexander Romero Gonzaga
Roman Augusto Tacconi Barraza
Luis Gerardo Colmenares
Daniel Ruiz
Gutierrez Diego
bruno guerra solano
Alex Camacho
Luis Lira
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.
me encanta!
Buenisima definicion
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) }
Gracias me salia el error tambien
Gracias por el dato! :D
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; }
Gracias por tu aporte. Eso viene en el examen de Sass y no lo sabía. :D
Super! :D
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!!!!!
Wow :O buen dato
Genial esta solución si me funcionó, gracias.
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!
Entonces la sugerencia sería eliminar el height y dejar lo demás como está solamente
pueden llamar los archivos sin la extencion :V
Y también puedes escribir sin el pacman.
:O
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() }
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:
La extensión .styl no es necesaria en el import pero sí el guión bajo, como bien indicaste.
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.
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.
Alguien me puyede explicar bien, lo de función dentro de una función. Para que sirve? Cómo se usa. No entendí
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...
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
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.
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
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
Me gusta la playera que trae el profe :v
Hola chicos, no es necesario colocar la extension de .styl
Aquí pueden encontrar más a cerca de las funciones preestablecidas de Stylus-Lang:
BUILT-IN FUNCTIONS
Las mixins tambien sirven para hacer reglas en los estilos, me explico con un ejemplo, si tengo un objeto llamado breakpoints:
$breakpoints: ( "sm": 0, "md": 560px, "lg": 720px, "xl": 1200px, "xxl": 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) == "%" or unit($prev-num) == "%" { // Do nothing } @else if not comparable($prev-num, $num) { @warn "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}' !"; } @else if $prev-num >= $num { @warn "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}' !"; } $prev-key: $key; $prev-num: $num; } }
esto les ayudara a crear reglas entre sus equipos para que mantengan el orden
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
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.
Sabes cual es la razon de que solo funcione con llaves?
Como utilizo Zeplin, ya lo descargue y no encuentro la manera de anexar un archivo a Zeplin para poder ver todas sus configuraciones?
por que no se utiliza el "_" para modularizar el trabajo es que en stylus por defecto el preprocesador no lo transforma en css
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
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 :)
