Imports y Extends

Si no te compila revisa la dirección del @import así debe estar

Tip: al momento de usar import no es necesario colocar la extensión del archivo, con solo escribir el nombre funciona:

@import "components/globales";
@import "components/perfiles";
@import "components/estadisticas";
@import "components/ubicaciones";

Con razón la gente prefiere Sass, si permite clonar el código completo de un selector y traerlo a otro.

No conocía la etiqueta <i> de Html5 pero su descripción en

<i>	Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.

Me sorprendió aún más 😮

Este curso necesita actualizacion ya.
Segun State of CSS 2020 este 2021 deberiamos aprender SCSS y PostCSS.
Siento que deberiamos empezar a recomendar el uso de las propiedades logicas y relativas, ademas de armar nuestras paginas tipo lego, con componentes y elementos, no desde una sola base de html.
No me gusta este curso.

Si nos les compila el código cuando utilizan @import, miren si tienen bien la dirección de ruta de los archivos. Si la carpeta componentes se encuentra fuera de la carpeta CSS donde esta el archivo ejercicio-sass.scss en la dirección de ruta deben colocar lo siguiente:

@import "../componentes/globales.scss";

Los … indican que el archivo se encuentra en otra carpeta y sale de la misma para buscarlo.

Otra variable que se podía haber creado es $text-transform: uppercase, ya que dentro del código se reutiliza con mucha frecuencia.

En el caso de que aún con el " _ " Prepros siga compilando el archivo lo que hay que hacer es añadir el " _ " a la lista de archivos excluidos. en Prepros 5 la ruta es App menu> Project defaults> Filters> Project Filters.
Solo hay que colocar un “,_” al final de la lista.

Me preguntaba por qué no me funcionaba el @impor (usando “Live Sass Compiler” ) y es porque ahora se debe cambiar por @use. Entre otras cosas, este video lo explica mejor

Se vuelven muy repetitivas las clases y en todos los videos demora aproximadamente 5 minutos en abordar los temas en cuestión.

Trabajar por modulos hace mas organizado el proyecto

@extend & @import en Sass

.
@extend funciona para que un elemento herede todas las propiedades y valores de una clase que le tenemos que especificar. Por ejemplo:

.class2{
  @extend .class1;
}

.
En el caso del @import, lo que hacemos es importar las propiedades de un archivo extension “scss”, aunque OJO, los archivos que van a ser importados deben tener un guion bajo al inicio. Esto le dice al preprocesador que ese archivo no tiene que ser compilado. Un ejemplo de un archivo a ser importado es: _footer.scss
@import se usa de la siguiente manera:

@import "./elementos/footer.scss"

Hay que tener en cuenta que no usamos una bandera de url() antes de escribir la dirección del archivo a importar y que el archivo en el documento que se compila ya no tiene el guion bajo.

VSCode crashea cuando escribes @imports

Desde marzo del 2019, Ruby Sass ha evolucionado a Dart Sass. Esta actualización trajo algunos cambios. Aunque @import sigue funcionando ya se considera anticuado y no se incentiva su uso. Ahora es preferible usar @use.
Por esto, la extensión de Live Sass Compiler de Ritwick Dey presenta errores que hace que tu VSCode se quiebre. En cambio, te sugiero usar la extensión “Live Sass Compiler de Glenn Marks” que es una versión que sí soporta Dart Sass y tiene mantenimiento aún en 2022.
.
Para entender el uso de @use y @forward este video mencionado por uno de los compañeros resulta muy útil.
.
Lo que tendrías que hacer en este ejercicio es…

1. Agregar la siguiente línea a cada uno de los componentes (perfiles.scss - estadisticas.scss - ubicaciones.scss). Nota: as * permite obviar la característica del namespacing que necesita @use.

@use 'globales' as * ;

1. Cambiar todo @import por @use en tu archivo ejercicio-sass.scss.
2. Ya no necesitas poner @use ‘globales’ en el archivo ejercicio-sass.scss.

Para los que le da crash el VSCode al momento de hacer el “@import” con la extensión de Liver SASS server solo tienen que entrar al archivo settings.json y agregar la siguiente linea
"color-highlight.languages": [ “*”, “!scss” ]

Con esto ya deberia ir bien todo

Hbai usado antes SASS, pero jamas habia visto el extends. Tanto codigo que me pude haber ahorrado.

Me convencieron! Me gusta mas trabajar separado mi código por módulos así lo tengo todo mas ordenado!

ya casi finalizamos sass 😄

Genial esta clase, ya estoy viendo lo útil que puede ser esto para mis proyectos

Es genial usar Extends simplifica un montón!!

¿Por qué se usa doble guión para separar .estadistica–perfil? ¿Acaso eso no es solo para los modificadorse?

Efectivamente la carpeta de los componentes debe ir en el mismo lugar donde esta el resto de carpetas de estilos, de lo contrario el preprocesador no va a compilar va a tirar un error

Por que cuando se importan los archivos scss, no se coloca el guion bajo, y aun así funciona?

Si el archivo les compila, para la ultima version de prepros es: AppMenu>Project Default>file watcher>Path Filters y en Add escriben “,_” pdt:Solo lo que esta dentro de las comillas

Que extraño includo añadiendo ,_ en Path Filters continua compilando el fichero de globales.scss 😕

¿Alguno a conseguido arreglarlo?

Extends es una funcionalidad de los preprocesadores de CSS que nos permite replicar un estilo existente en otro lugar que comparta las mismas o muy parecidas características.

**¿Cómo lo usamos? **

Primero observamos dónde podemos necesitar replicar un estilo, y luego vamos a escribir sobre el elemento o bloque que queramos aplicarlo.

Luego hacemos uso de:

@extends

y seguido agregamos de dónde queremos que copie y aplique ese estilo en particular.

@extends .perfil__titulo;

Listo.

Estaba teniendo problemas al momento de compilar con el Live Sass Compiler, me marcaba error y lo que me solucionó fue quitar la extensión del archivo. Quedo asi:

@import "componentes/globales";
@import "componentes/perfiles";
@import "componentes/estadisticas";
@import "componentes/ubicaciones";
 

este preprocesador si me gusta!!

También se pueden crear bloques opcionales de código
Bloques que solo serán compilados si se mandan a llamar con un @extend
Fuente

This tool for CSS it´s so amazing!

Extends

Es decirle a SASS que copie todos los estilos de otro lado al que ya le dimos estilos anteriormente

h2{
@extend (nombre de la clase, id, elemento que queremos que copie estilos)
}

Imports

-Es modularizar partes de codigo css

-Le ponemos de nombre aun archivo tipo SCSS
Un nombre ejemplo _globales.css
OBLIGATORIO QUE LLEVE GUION BAJO ANTES DEL NOMBRE PARA QUE NO LO COMPILE SASS

-Le pegamos el codigo copiado al archivo que queremos hacer como IMPORT y lo guardamos

-En nuetro archivo “PADRE” o principal vamos a importar todos los otros que modularizamos de esta manera

@import “(nombre carpteta ubicacion/nombre archivo.scss)”

-EJEMPLO

@import “componentes/ubicaciones.scss”

WARNING
-Tenemos que importar los archivos en orden (cual tiene las variables, cual tiene los estilos del header etc etc) para que de esta manera no nos de problemas.

Hola se me presenta este error. ¿Tienen idea de como solucionarlo?

RESUMEN DE LA CLASE:

EXTENDS

Como su nombre lo indica, funciona para “extender” las reglas css de un selector a otro. Esta funcionalidad viene a reemplazar el copiar y pegar bloques de reglas compartidos entre elementos de diseño. En el ejemplo abajo, @extend manda a llamar las mismas reglas css aplicadas con anterioridad a la clase .perfil__nombre y .perfil__titulo

.perfil__minibio {
    margin: 0 auto;
    padding-top: 20px;
    h2 {
        @extend .perfil__nombre;
    }
    h3 {
        @extend .perfil__titulo;
    }
}

IMPORTS

Existe para facilitar la modularización de los distintos componentes de diseño codificados en CSS. Funciona creando en primer lugar, los módulos como archivos separados y guardados con un guión bajo _modulo.scss mismo que se utiliza para indicar a prepros que NO compile ese archivo.

Posteriormente las reglas de CSS que comparten una misma categoría (perfiles, ubicaciones, cards, etc.) se depositan en el módulo apropiado. Ejemplo:

Finalmente, utilizamos @import seguido de la ubicación del módulo que queremos llamar en el archivo que SÍ será compilado de la siguiente forma:

@import "componentes/globales.scss";
@import "componentes/perfiles.scss";
@import "componentes/estadisticas.scss";
@import "componentes/ubicaciones.scss";

De tal manera que el archivo principal o a compilar se convierte en un contendedor de módulos invocados a través de la propiedad import de SaSS.

Saludos platzinautas.

En tiempos de coronavirus, aprender es lo mejor 😃

En la clase, el profesor usa el @extend en una clase ya existente en el código. No es considerado una mala práctica, ya que en el ejemplo es simple. pero desde la web de Sass te recomiendan hacer uso de placeholders para evitar problemas:

“Tu puedes extender desde selectores más básicos en vez de clases placeholder en Sass, pero usar placeholders es la forma más simple de asegurarte que no estés extendiendo una clase que está anidada en otro lugar, lo que puede resultar generar otros selectores de forma no intencional” Más info

Por mas que lo pongo un guión abajo el preprocesador me lo compila 😥

Excelente

que genial es sass!!

Es maravilloso porque, cuando tienes muchas líneas de código, llega a ser “frustrante”, cuando llegas a tener un “error”, y no lo encuentras.

Excelente clase!

cuando utilizamos _nombrearchjivo…scss le estamos diciendo al preprocesador que no compile

interesante

La verdad, que muy útil. Hasta ahora es el que mas me convence.

Se me hace que pug y scss tienen cosas muy similares , está genial. 😄

A mi me funcionó el import de estas dos maneras:

@import "../componentes/_globales.scss";
@import "../componentes/_perfiles.scss";
@import "../componentes/estadisticas";
@import "../componentes/ubicaciones";```

excelente me esta gustando mucho sass, tuve el mismo problema que muchos en la ruta porque puse la carpeta de los componentes fuera de css, pero logre resolver jejejej

Genial realmente sass es muy útil, por ahora se me hace el que mayor beneficio tiene

Asi debe ser la estructura:

Resumen de la clase _

Parecido a less 😕 interesante

Muy bueno el video, entonces la idea que tengo de los imports y extends es que uno se usa dentro del mismo archivo para reusar codigo y el import sirve para traer bloques de codigo de otros archivos.
Si los nombras a estos archivos con “_nombreDelArchivo”, te evitas que el compilador los compile creando archivos css inecesarios.

Muy buena la clase me quedo con @extend para usar en un mismo archivo y @import para traer bloques de codigo de otra fuente.

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

uff esta es buena

(_) guion bajo, para decirle a **Sass **que ese archivo no se va a compilar, porque se va a reutilizar.

(_) guion bajo, para decirle a Sass que ese archivo no se va a compilar, porque se va a reutilizar.

@import "../componentes/globales.scss";
@import "../componentes/perfiles.scss";
@import "../componentes/estadisticas.scss";
@import "../componentes/ubicaciones.scss";

Falto agregar esto en la clase del h3:

&__titulo {
  opacity: 50%;
}

para que tenga ese efecto de transparencia.

Sin duda el tomar notas a mano me ha ayudado bastante para retener información, a mi no me basta con ver el video e ir escribiendo código al ritmo del maestro, puede ser un poco mas tedioso, pero al tomar apuntes de estar manera he notado que no olvido lo que acabo de ver, al día siguiente 😄

b