Imports y Extends

Clase 25 de 42 • Curso de Preprocesadores CSS

Resumen

Import nos permite escribir código modular separando en diferentes archivos para después importarlos todos en uno solo y tener una base código mucho más ordenada.

Extends sirve para insertar los estilos de un selector en otro.

Stiven Jiménez

student•

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

Daniel Esteban Santos Mendez

student•

Porque dejaste la componenes fuera de la carpeta de css, si la pones dentro te funciona como sale en la clase y creo que por buenas practicas es mejor.

Stiven Jiménez

student•

Realmente si usas sass es mejor que lòs archivos y componentes de sass estén en otra carpeta al final del dia cunado tu código sea enviado a producción los archivos con extensión scss no deberían ser enviados

Sergio Bernal

student•

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

Efraín Hernández García

student•

Gracias! si me funcionó

Addi Alberto Salazar Espinosa

student•

Muy buen dato! :D

John W. Martínez

student•

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

Obed Paz

student•

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.

Camilo Gonzalez

student•

Este curso solo te enseña de forma general el potencial de los preprocesadores y para los ejercicios prácticos basta un html. En la vida real se trabaja con frameworks o librerias y ahi vas a poder implementarlo en componentes.

Andres Velasquez

student•

Este es un curso de fundamentos e introducción a los Preprocesadores. Es lógico que para cuando cada quien vea este curso tendrá que actualizarse.

Todos los cursos requieren actualizaciones, eso es verdad. Pero para este ser un curso que enseña las bases está más que bien.

Cristian Córdova

student•

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 :O

Francisco Javier Araujo de la Garza

student•

Se utiliza para el texto en Italica y generalmente tambien se usa para incluir iconos, ya que solo son iconos no tienen formato en italica, eso lo vi en un curso de Leonidas Esteban creo que en el de responsive.

Maricruz Pizaña Solano

student•

Exacto, también lo utilicé para iconos en el curso de Leonidas. Te lo recomiendo

Alexis Toro Navarro

student•

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

Daniel Flores

student•

No me estaba importando, muchas gracias!

Tomás André Peñaloza Avilés

student•

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

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

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

Fabian Rivera Restrepo

student•

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

Jhonatan David Ibarra Lavado

student•

exacto amigo :D

Addi Alberto Salazar Espinosa

student•

Claro

Martín David Roldán

student•

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.

Angélica Rocha

student•

Muchas gracias por tu muy buena ayuda estaba penando por esto, gracias.

Martín David Roldán

student•

De nada :D

Jeferson Velásquez

student•

Andres Velasquez

student•

Genial tu resumen.

Duvan Yesid Becerra Rodríguez

student•

Hola, estuve investigando un poco y encontré que @import is deprecated (como lo informo un compañero en la sección de preguntas. Busqué en la documentación de SASS y muestran como usar @use y @forward pero a la hora de usarlos en conjunto en los archivos que llevamos hasta ahora entran en conflicto.

Está es mi solución, basado en estas dos fuentes:

SASS doc. @use
SASS doc. @forward
Kevin Powell.

Creamos un archivo _variables.scss donde guardamos las variables que tenemos hasta ahora y donde se guardaran todos los mixins y functions.

// FONTS
$font-one: 'Lato', sans-serif;
$font-two: 'Oswald', sans-serif;

// Colors
$primary-color: #333333;
$secondary-color: #8841da;
$light-color: #ffffff;
$aux-color: #3f579a;

Luego crearemos un archivo _index.scss donde ponemos el @forward de las variables:

@forward '../components/variables';

Con esto ya podemos ir a _perfiles.scss (y los demás componentes) y poner un @use del archivo _index.scss

@use './index' as *;

.perfil {
  width: 50%;
  padding-top: 50px;
  text-transform: uppercase;
  text-align: center;
  background-color: $secondary-color;
  color: $light-color;
  ...
}

Se preguntarán "¿Por qué pones 'as * ;'?" Esto por un tema con las variables que pueden leer más en la documentación. Por último paso, en ejercicios-sass.scss (o el archivo que usamos para está clase que contenía los @import), usamos @use para llamar a todos los componentes:

@use '../components/globales'; // Aquí estarán los estilos de body, main, etc.
@use '../components/perfiles';
@use '../components/estadisticas';
@use '../components/ubicacion';

Sigan buscando más info del tema y cómo usar la modularidad con SASS para que apliquen buenas prácticas a la hora de maquetar todos los archivos de sus proyectos. Espero les haya servido este aporte.✨

David Loreto

student•

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.

Maricruz Pizaña Solano

student•

Cool, gracias.

Paula Kneeteman

student•

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

Emilio Escobar

student•

Un favor Platzi Team podrían actualizar el modulo de @Imports e integrar el uso de @use como una actualización a su curso?.

Irving Juárez

student•

Como funciona el @use?

Kenneth Angulo L

student•

Preguntas de hace 9 y 8 meses, considero importante aclarar (actualmente es mayo de 2022).

SI es cierto @imports is deprecated (es obsoleto), aunque se puede seguir usando no es buena idea usarlo.

La opcion entonces es usar @use y @forward

Explico como usar @use:

@use se escribe al principio del archivo, y funciona solamente como un namespace, funciona asi:

@use "./globales";

.perfil {
	width: 50%;
	padding-top: 50px;
	color: globales.$color-claro;
	background-color: globales.$color-secundario;
	// A continuacion eso se llama anidacion
	&__avatar {
		display: block;
		margin: 0 auto;
		border-radius: 50em;
	}

Y este debera ser usado en cada archivo que necesite las variables globales, porque a diferencia del antiguo @import solo funciona en el contexto del archivo que hizo el llamado.

Notese tambien que para llamar las variables hay que usar el espacio de nombre asi:

color: globales.$color-claro;

Para no tener que llamar a cada variable con el namespace, s epeude usar un alias en el llamado del archivo de globales asi:

@use "./globales" as *;

.perfil {
	width: 50%;
	padding-top: 50px;
	color: $color-claro;
	background-color: $color-secundario;
	// A continuacion eso se llama anidacion
	&__avatar {
		display: block;
		margin: 0 auto;
		border-radius: 50em;
	}

Irving Juárez

student•

@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.

Juan Camilo Moreno

student•

Trabajar por modulos hace mas organizado el proyecto

Gonzalo Pimentel

student•

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

Andres Velasquez

student•

La modularización también se aplica a funciones y permite ver de manera más sencilla que esta haciendo y donde esta cada cosa.

Menos lineas, más facil lectura.

Vicente Benavides

student•

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

Andrés David Solarte Vidal

student•

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

Ivan Dali Garcia

student•

La regla @import espera como argumento el nombre del archivo a importar. Por defecto busca un archivo Sass y lo importa directamente, pero a veces esta regla se deja tal cual al compilar el archivo CSS: Si la extensión del archivo importado es . css.

Extends / Placeholders:

Nos permite crear un fragmento de estilos que luego podamos reutilizar fácilmente en cualquier componente. Los Extends nos ayudan a escribir Sass haciendo uso del principio DRY. Básicamente nos permite generar menos CSS con mayor cantidad de selectores.