¡Deja de usar @import! - aprende a usar las reglas @use y @forward - SASS - recomendación - :D

Поделиться
HTML-код
  • Опубликовано: 10 янв 2025

Комментарии • 38

  • @nelosanjines6463
    @nelosanjines6463 4 года назад +4

    Gracias por los saludos, buena explicación, en el App scss también se puede utilizar @use regla, @forward esta pensado para extraer un compendio de archivos a través de un index local, que recopila varias carpetas scss o archivos.scss(parciales), y con @use se axcede de donde sea a ese compendio de carpetas o parciales, a traves de espacio de nombre, que habilita @forwar, esta regla esta pensada más para la creación de librerías. Gracias por la explicación y saludo grande y a la espera de tu próximo vídeo.

    • @frontdev3702
      @frontdev3702  4 года назад +1

      Asi es Nelo!, bien lo dices, yo justo tengo una librería la cual ya migré haciendo uso de estas reglas...hay cosas muy interesantes con todo esto! :D

  • @franciscobecerra4780
    @franciscobecerra4780 2 года назад +1

    Buen video
    Gracias me ayudo mucho

  • @juanjohorisberger3645
    @juanjohorisberger3645 3 года назад

    Alguien sabe porque me salta error al momento de compilar mis archivos? Teniendo en cuenta que estoy utilizando Dart Sass..

  • @dinael
    @dinael 4 года назад +1

    Hola con qué se puede compilar ni Prepros ni Live Sass Compiler dan soporte para @use

    • @frontdev3702
      @frontdev3702  4 года назад

      Que tal Dinael, saludos!! se debe compilar con Dart SASS, con el cli de sass no tendrias que tener ningun problema

    • @dinael
      @dinael 4 года назад +1

      @@frontdev3702 Hola! Muchísimas gracias por responder, luego de investigar un poco he visto que increíblemente no le dan soporte a @use...
      En fin que lo he resuelto con SASS directamente: sass --watch src/scss/styles.scss dist/css/style.css
      Ya más adelante monto un webpack como debe ser.
      Otra vez muchas gracias!!

    • @frontdev3702
      @frontdev3702  4 года назад +1

      @@dinael no hay que agradezcas colega!...cualquier otra duda estoy al tanto

  • @AlexSearchYT
    @AlexSearchYT 3 года назад +1

    Seguramente no leas esto pero, ¿qué extensión usas para mostrar los colores de esa manera?
    pd: buenísima explicación con un ejemplo real, héroe.

    • @frontdev3702
      @frontdev3702  3 года назад

      Que tal Alex si lo leí!! :D . . . la extensión se llama vsdoce-pigments es muy útil, además de poder ver el color de esa manera te permite convertir los colores a hexa, rgba, hsl saludos!!

  • @MaxielJohannaCamargoGomez
    @MaxielJohannaCamargoGomez 4 года назад

    :O siento que va a ser bien complejo cambiarlo en proyectos muy grandes en especial por el tema del "as". De nuevo gracias por el maravilloso contenido y saludos desde Colombia :)

    • @frontdev3702
      @frontdev3702  4 года назад

      Así es Majo será una labor interesante :D así como tiene sus pros tiene sus contras(en teoría todo son ventajas jaja) igual esperemos que cuando ese cambio comience a surgir mas herramientas que nos ayuden ...igual el tema del "as" no es forzoso pero lo veo como good practice ...saludos!!

    • @giovannygarzonsoto
      @giovannygarzonsoto 3 года назад

      @@frontdev3702 En la documentacion que dejo en la descripcion sobre @import mencionaban que habian escrito una herramienta para migrar facilmente de @import a @use

  • @eduardflores8420
    @eduardflores8420 2 года назад

    entonces deberiamos remplazar todos nuestros @import por @forward para impotar los archivos que no compilan como ariables,mixin,etc ?

    • @frontdev3702
      @frontdev3702  2 года назад

      Hola Eduard, es correcto, la realidad es que import aun funciona sin problema alguno, pero si es mucho mejor trabjar con forward, en proyectos nuevos es bueno comenzarlo a aplicar. . .saludos! :D

  • @juanpablo9717
    @juanpablo9717 3 года назад +1

    Alguien sabe si hay alguna forma de que las variables importadas como por ejemplo los colores, como puedo hacer que en el archivo importado tambien se me vea el nombre de la variable con el color de fondo como se muestra en el archivo sin importar ?

  • @benjamindomador1074
    @benjamindomador1074 3 года назад +1

    Hermano llevo como un mes estudiando desarrollo web por mi cuenta y quiero saber algo .____. al compilar con el @use eso mismo va al archivo .css...no hay problema con eso ? es decir, en el css aparece @use...CSS si acepta eso ?, es que VScode me lo subraya en amarillo...aunque si sirve pues

    • @frontdev3702
      @frontdev3702  3 года назад +1

      que tal Jose, saludos, no eso no sucede @use es una directiva de sass, sass al ser procesado se convierte en css, todo lo que escribas en sass(variables, metodos, directivas, funciones, etc) al final se convierte en simple css que es lo que los navegadores pueden leer

    • @frontdev3702
      @frontdev3702  3 года назад +1

      entiendo todas las dudas que puedas llegar a tener, si te puedo ayudar en algo mas con gusto lo hago :D

    • @benjamindomador1074
      @benjamindomador1074 3 года назад +1

      @@frontdev3702 No se qué pasó al comienzo que si me aparecía el @use en CSS, luego se quitó, pero no se por qué al comienzo me aparecían los @use el scss .___. gracias por contestar

    • @Alexperdel
      @Alexperdel 2 года назад

      @@benjamindomador1074 Pues me pasa lo mismo, ayer fue la primera vez que puse en práctica el @use y me lo pasa al CSS y también me lo pone en amarillo coloca el UTF-8. Qué es lo que está mal?

  • @juanluistorres1559
    @juanluistorres1559 4 года назад +1

    Excelente video, no conocía esas funciones de SASS
    Pero una duda, cuando compile y revise mi archivo .css me marcaba los forwards o use como error
    Sabes porqué?
    Saludos

    • @frontdev3702
      @frontdev3702  4 года назад

      Saludos Juan!,. . .puede decirme que le dicen los errores?

    • @juanluistorres1559
      @juanluistorres1559 4 года назад +1

      @@frontdev3702 cuando compilo el codigo, en el Css de salida me marca errores y no me tranforma el @forward o@use de scss a css

    • @frontdev3702
      @frontdev3702  4 года назад

      @@juanluistorres1559 oo ok, mandame priv para ayudarte un poco mas

    • @juanluistorres1559
      @juanluistorres1559 4 года назад +1

      @@frontdev3702 pude encontrar que era el falló, se tiene que compilar con Dart SASS y yo usaba Node SASS o el live compiler de VSCode
      Por lo que entiendo cómo estás reglas son relativamente nuevas solo con Dart
      Aúnque aún no entiendo muy bien porque jajaja pero ya funcionó 😄 igual muchas gracias por la ayuda y los excelentes vídeo jaja

    • @juanluistorres1559
      @juanluistorres1559 4 года назад +1

      @@frontdev3702 tu conoces las diferencias entre estos compiladores o formas de compilar?
      Estaría muy bien un vídeo acerca de ello
      Saludos :D

  • @germanbaena6579
    @germanbaena6579 Год назад +1

    La verdad muy enredado el ejemplo, me perdí y no entendí ni un carajo!

    • @frontdev3702
      @frontdev3702  Год назад

      Si puedo ser más explícito en tus dudas para mi será un gusto poder ayudarte, saludos! :D