Funciones

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.

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

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

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!!!

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!

pueden llamar los archivos sin la extencion :V

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

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:

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

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

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.

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

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

**Declarar y definir una función en Stylus:
**

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

Creando función en Stylus

Aquí hice un resumen, espero les sirva

Las Funciones a diferencia de los Mixins es que:

• Con las funciones se pueden definir los parámetros y definir cual es exactamente lo que quieres mandar, aquí decimos por ejemplo que no queremos que nos mande todo, solo mandame exactamente esto.

• Con el mixin es todo lo que se declara que se va a imprimir por defecto en el selector

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

Hasta ahora no vi como trabajar con seudo elementos, seudo clases, no me queda claro como hacer un hover en preprocesadores.

ayudan mucho las funciones en los preprocesadores, es mas facil de usar que todo lo que se tiene que escribir en CSS nativo

Excelente clase

Cuanta diferencia entre estos preprocesadores, se siente raro la facilidad de trabajar en stylus pero no es complicado. Y ahora con la diferencia entre mixins y functions me siento un poco más cerca de terminar un gran proyecto.

para solucionar lo del error cant not read a property “r”, hay que indexar bien todos los campos para hacerle entender a stylus que estamos usando una funcion

Al igual que se realizo en el modulo de Sass, acá también se puede usar el _nombreArchivo.styl para que no nos compile todos los módulos, sino que nos compile todo en un solo archivo que es el principal

Aveces creo que el profe va muy rapido haha 😂😂, del resto todo muy bien

al modularizar el se manda a llamar al archivo original de la siguiente manera @import "componentes/globales.styl"

Me gusta la playera que trae el profe :v

Documentación de Stylus:
https://stylus-lang.com/docs/functions.html

En analogía:
MIXINS : VOID METODS
FUNCTION : FUNCTION
En otras palabras, los mixins son funciones que no devuelven valores; mientra que las funciones sí devuelven valores.

no me reconoce el alpha en la funcion de opacidad esto me sale como error en prepross
Cannot read property ‘r’ of undefined

Si les sale el error: ‘Cannot read property ‘r’ of undefined’ revisen si tienen bien la identación en VSCode:

Cuando escribo la función, prepros me da un error que dice

Cannot read property ‘r’ of undefined

Genial! 😄

Estuve probando las funciones y usando condicionales, muy util 😃

darkmode        = true
set_darkmode(background = false, color = false)
    if darkmode
        if background
            background-color #333333
        if color
            color #f1f1f1

Con respecto al reto, me han gustado las built-in functions que te ahorran código de javascript, como la index(list, value), la percentage(num), ceil, floor, round, min, max, etc… Me ha parecido interesante 😃

Archivo raiz

@import "../componentes/globales.styl"
@import "../componentes/buscadores.styl"
@import "../componentes/filtros.styl"
@import "../componentes/cajas.styl"
@import "../componentes/estadisticas.styl"

Funcion en archivo globlales.stly

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

Archivo estadisticas.styl

.estadistica--articulos
    height: 70px
    padding: 20px
    border-top: 1px solid color-primario
    ul
        display: flex 
        margin: 0
        padding: 0
        justify-content: space-evenly
        li 
            list-style: none
            color: opacidad(color-primario, .30)
        span
            margin-left: 10px

La facilidad de las funciones ❤

Una Funcion se declara asi:

get-opacity(color, amount) 
	alpha(color, amount)

No me compilaba hasta que coloqué los dos puntos (…) en el inicio de la ruta:

@import "../css/componentes/globales.styl"
@import "../css/componentes/buscadores.styl"
@import "../css/componentes/filtros.styl"
@import "../css/componentes/cajas.styl"```

n

pop(expr)
Pop a value from expr.

 nums = 4 5 3 2 1
 num = pop(nums)

 nums
 // => 4 5 3 2
 num
 // => 1```

Dato Curioso
Al modularizar, prepos automáticamente genera un archivo css por cada modulo .Styl. Este archivo css se genera cuando guardamos el archivo.
Lo cierto es que no necesitamos tener el css de cada modulo sino solo el css general.

Para ello, puedes indicarle a prepos que no compile los módulos guardándolos con un “_” antes del nombre, por ejemplo:

“_globales.styl”

Importante

A diferencia de Sass, stylus si requiere que indiques el nombre mas el “_” al momento de importarlos, por ejemplo

@import "componentes/_globales.styl"
@import "componentes/_buscadores.styl"
@import "componentes/_filtros.styl"
@import "componentes/_cajas.styl"```