No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Funciones

33/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 43

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥淐annot read property 鈥榬鈥 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

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 鈥淐annot read property 鈥榬鈥 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 鈥渞鈥, 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

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 鈥榬鈥 of undefined

Si les sale el error: 鈥楥annot read property 鈥榬鈥 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 鈥榬鈥 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"```