No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar

12/20
Recursos

Aportes 26

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

para poder cambiar el color del svg de forma mas facil y desde el css pueden hacer lo sieguiente, en el body colocan

    svg path {
        stroke: currentColor;        
    }

y luego desde lo quieran cambiar solo deben colocar

svg {
	color: "$el color que quieran"
}

Trucos
.

  • Si quieren hacer scroll horizontal en la pantalla Mobile deben agregar en los media queries esto:
								.card-section
                    width: 100%
                    display: grid
                    grid-auto-flow: column
                    overflow-x: scroll 
                    justify-content: initial
                    gap: 10px> 
  • y si desean cambiar el color de la barra de navegación usen esto:
								.card-section::-webkit-scrollbar
                    height: 14px
                .card-section::-webkit-scrollbar-thumb
                    background-color: #FA9500
                    border-radius: 8px

La razón por la que el código no esta con {} y ; es por que use la extensión .sass pero de resto es igual, buena suerte platzinautas.
.
Y este es el resultado

que locura, mucho desorden…

Bastante desordenado todo , con las idas y venidas!!! no se logra entender bien

Bastante desordenadas estas clases 😒

Así me quedó para mobile 😸

Con todo el respeto a la instructora, me costo comprender un poco el curso en general, en partes sentí que hacia todo lo que otros profesores decían que evitáramos por buenas practicas.

Para cambiar el color del svg, en el minuto 11:39 no funciona porque falta agregar la etiqueta path, es decir:

svg path{
stroke: “FFFFFF”
}

Y funciona

No necesitan identar al mismo nivel en healtcare, pueden hacerlo así.

.furtniture{
        @extend .healthcare;
        .card-section{
            .product-card{
                background-color: $tertiary-color;
                color: $primary-color;
            }
        }
    }```

waooo… @extend… eso es completamente nuevo para mi… 😃

Me quedo con Diego de Granda.

(min 19:55) Lo de la herencia de @extend es lo mismo que poner esto:

Formatear código

Para formatear el código de manera automatica solo debes presinar F1 y buscar Format Document, darle enter y listo. 🔥🙂

qué clase tan improvisada, empezamos con algo y terminamos cambiando todo

Esto debería haberlo hecho desde un principio. Trabajar de forma mas ordenada en la clase, hace que los usuarios no se pierdan en el código. (Sugerencia)

Waos, con el @extend se ahorro mucho tiempo

Lo que hice con grid (sufriendo xd):

.healthcare {
        padding-bottom: 72px;
        h2 {
            font-weight: 300;
        }
        .card-section {
            display: grid;
            grid-template-columns: repeat(3,minmax(100px,1fr));
            column-gap: 120px;
            row-gap: 72px;
            .product-card {
                display: grid;
                gap: 12px;
                padding: 20px 40px;
                border-radius: 8px;
                background-color: $secundary-color;
                button {
                    justify-self: end;
                    border: none;
                    background: none;
                    svg{
                        width: 36px;
                        height: 36px;
                        path{
                            stroke: $primary-text-color;
                       }
                    
                    }
                }
                .product-image{
                    width: 100%;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        object-position: center;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }
                
                p, h3{
                    margin: 0;
                }
            }
        }
        
    }
    .furniture{
        @extend .healthcare;
        .card-section{
            .product-card{
                background-color: $tertiary-color;
                color: white;
                button {
                    svg{
                        path{
                            stroke: white;
                       }
                    
                    }
                }
            }
        }
        
    }

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(“C:\Users\josue\OneDrive\Imágenes\code.png”)

Siento que sería buena idea dejar en los recursos de la clase el enlace al Figma del proyecto, ya que la profesora nos pide cambiar los textos.

que chulada eso de @extend

uff me paso que al cambiar el nombre de la variable de $quaternion-color a $quaternary-color no se aplicó a todas las variables declaradas y eso hizo que el watch SASS detectara errores de compilación y no se aplicarán mis cambios hasta que corregí el error.

No sabía que, si había un error en los estilos, no se aplicaban.

una locura esta clase

Código en el repositorio de Github [platzi/cursos-sass (github.com)](https://github.com/platzi/cursos-sass)

No sé si sea por el curso en sí mismo. Leí que sass era como darle super poderes al css. Pero hasta ahora solo lo he sentido como css con pasos exrtra.

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(url)

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(https://static.platzi.com/media/user_upload/code-d4ec86a5-b460-46a8-a215-1e7c4536d814.jpg)

Para cambiar una palabra en todo el archivo: Ctrl + F y le dan click en la felcha de la izquierda, lo que les permitirá reemplazar una o todas las palabras