A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Imports y Extends

25/42
Recursos

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.

Aportes 59

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淟ive 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 鈥渟css鈥, 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 鈥淟ive 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 鈥榞lobales鈥 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鈥損erfil? 驴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 鈥淧ADRE鈥 o principal vamos a importar todos los otros que modularizamos de esta manera

@import 鈥(nombre carpteta ubicacion/nombre archivo.scss)鈥

-EJEMPLO

@import 鈥渃omponentes/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 鈥渆xtender鈥 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:

鈥淭u 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 鈥渇rustrante鈥, cuando llegas a tener un 鈥渆rror鈥, y no lo encuentras.

Excelente clase!

cuando utilizamos _nombrearchjivo鈥css 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