No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

At Rules: CSS y nesting

7/20
Recursos

Aportes 25

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

  • @use: importa, modulos estilos y funciones de otras hojas de estilos. la diferencia con @import es que import se encarga de hacer los estilos globales.
  • @function: permite crear funciones personalizadas, sin embargo Sass cuenta con funciones ya existentes.
  • @forward: Recibe como parametro una URL y nos ayuda a cargar los estilos de nuestra hoja de estilos, es muy importante hacer uso de @use para que los modulos esten disponibles en nuestra hoja de estilos.
  • @extend: tiene que ver con el concepto de herencia.
  • @at-root: se encarga de cargar nuestros estilos en el root del css.
  • @include: nos ayuda a invocar los mixins.
  • @error, @warn @debug: sirver para cuando hay un error, una advertencia o se quiere debugear, respectivamente
  • @for, @if, @each, @while: tienen que ver con estructuras de control, se pueden usar dentro de una funci贸n

Conforme se va adentrando m谩s a la implementaci贸n de Sass es cuando se le va viendo m谩s su utilidad y como nos ahorra bastante tiempo.
Implemente mobile first por lo que use un media querie y a dem谩s la pseudoclase hover.
Comparto el c贸digo por si le sirve a alguien.
.
C贸digo:

nav{
  inline-size: 100%;
  padding-block: 2rem;
  padding-inline: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  gap: 1.5rem;

  .nav-title{
    text-decoration: none;
    font-size: 1.25rem;
    color: $primary-text-color;

    &:hover{
      text-decoration: underline;
    }
  }

  .nav-list{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 2rem;

    .nav-img{
      display: block;
    }
  }

  @media (min-width: 768px) {
    flex-direction: row;
    gap: 0;
  }
}

.
Resultado

Tipos de At-rules y ejemplos

.

  1. At-rules de Animaciones y Transiciones: estas at-rules permiten definir animaciones y transiciones para los elementos HTML en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @keyframes, @transition, y @animation.
    .
  2. At-rules de Media Queries: estas at-rules permiten definir estilos para diferentes tama帽os de pantalla y dispositivos. Ejemplos de at-rules en esta categor铆a incluyen @media, @import, y @charset.
    .
  3. At-rules de Variables y Mixins: estas at-rules permiten definir variables y funciones reutilizables para estilos CSS. Ejemplos de at-rules en esta categor铆a incluyen @variable, @mixin, y @include.
    .
  4. At-rules de Fuentes y Tipograf铆a: estas at-rules permiten definir estilos para fuentes y tipograf铆a en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @font-face, @font-feature-values, y @font-size-adjust.
    .
  5. At-rules de Compatibilidad con Navegadores: estas at-rules permiten definir estilos espec铆ficos para navegadores y versiones de navegadores espec铆ficos. Ejemplos de at-rules en esta categor铆a incluyen @-webkit-keyframes, @-moz-document, y @supports.
    .
  6. At-rules de Grillas y Dise帽o: estas at-rules permiten definir estilos para dise帽os de grillas y disposici贸n de elementos en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @grid, @flexbox, y @supports.
    .
  7. At-rules de Selectores: estas at-rules permiten definir estilos para selectores espec铆ficos en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @page, @namespace, y @document.
  8. At-rules de Colores: estas at-rules permiten definir estilos para colores y gradientes en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @color-profile, @counter-style, y @mask.
    .
  9. At-rules de Im谩genes y Multimedia: estas at-rules permiten definir estilos para im谩genes y multimedia en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @image, @media-document, y @media-rules.
    .
  10. At-rules de Estilos Generales: estas at-rules permiten definir estilos generales para la p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @charset, @viewport, y @scope.
    .
  11. At-rules de Interactividad: estas at-rules permiten definir estilos para la interactividad y el comportamiento de los elementos HTML en una p谩gina web. Ejemplos de at-rules en esta categor铆a incluyen @scroll-timeline, @pointer, y @input-placeholder.
    .
  12. At-rules de Debugging: estas at-rules permiten ayudar en la depuraci贸n de los estilos CSS. Ejemplos de at-rules en esta categor铆a incluyen @debug, @warn, y @error.

Yo lo hice as铆 馃槢

button {
            border: none;
            background: none;
            svg{
                width: 36px;
                height: 36px;
                path{
                    stroke: $primary-text-color;
                }
                
            }
        }

Cuando dice en el min 17:25 que est谩 creciendo mucho este padding, es porque no puso en el selector universal * el box-sizing: border-box

No entend铆 la raz贸n de copiar y pegar el svg dentro del html

    <img src="./assets/svg/profile.svg" alt="">

Cuando pone div en los 3 bottons, les paso un tip, seleccionan los 3 buttons, luego presionan ctrl + shift = p, despues escriben "wrap + enter", luego div + enter

驴Por qu茅 se copia y pega todo el SVG en lugar de traerlo con src=""? 驴es por alg煤n tema de sem谩ntica? Se me hace como alargar mucho el html sin necesidad.

Yo le trabaj茅 as铆. La verdad, me encanta el anidamiento, es algo que en CSS hace que el c贸digo lo hace muy dif铆cil de seguir.

<!-- NAVBAR -->
    <nav>
        <div class="navbar__title">
            <h1>Eco-Store</h1>
        </div>

        <div class="navbar__icons">
            <ul>
                <li class="navbar__icons-profile">
                    <a href="/">
                        <svg> 
                        </svg>
                    </a>
                </li>
                <li class="navbar__icons-whishlist">
                    <a href="/">
                        <svg >
                        </svg>
                    </a>
                </li>
                <li class="navbar__icons-cart">
                    <a href="/">
                        <svg >
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
nav {

    width: 88%;
    min-width: 320px;
    height: 135px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1;
    align-items: center;


    .navbar__title h1 {
        font-size: 3rem;
        font-weight: 400;
        line-height: 3.9rem;
        color: $color-text-primary;
    }

    .navbar__icons {
        justify-self: end;
    }

    .navbar__icons li {
        display: inline-block;
        list-style: none;
        padding-left: 20px;
    }

    .navbar__icons li svg {
        width: 38.25px;
        height: 38.25px;
        cursor: pointer;
    }

}

Nesting:

  • 鈥淣esting鈥 en CSS significa anidar selectores dentro de otros selectores.
  • Se utiliza para estructurar y modular el c贸digo de estilo de manera organizada.
  • Similar a organizar archivos en carpetas y subcarpetas para mantener todo en su lugar.
  • Mejora la legibilidad y mantenibilidad del c贸digo CSS.
  • Facilita la comprensi贸n de la jerarqu铆a y relaci贸n entre los estilos.
  • Permite evitar la repetici贸n de c贸digo al aplicar estilos espec铆ficos a elementos anidados.
  • Una pr谩ctica 煤til para proyectos CSS m谩s grandes y complejos.

Con CSS normal:

header {
  background-color: #333;
}

header h1 {
  color: white;
}

header nav {
  font-size: 16px;
}

Con nesting en SCSS:

header {
  background-color: #333;

  h1 {
    color: white;
  }

  nav {
    font-size: 16px;
  }
}

驴Qu茅 clase me brinque que yo no tengo la carpeta con los svg? (min 5:51)

Codigo scss

$primary-color: #FFEFE7;
$secondary-color: #FFDAC6;
$tertiary-color: #BABD8D;
$primary-text-color: #7C6A0A;
$font-stack:  'IBM Plex Sans', sans-serif;;

body {
    margin:0;
    padding: 0;
    background-color: $primary-color;
    font-family: $font-stack;
}

/* */

nav {
    width: auto;
    height: 100px;
    display: flex;
    justify-content: space-between;
    color: $primary-text-color;
    padding: 15px;
    p {
        font-size: 1.5em;
        padding-left: 30px;
    }
.icons {
    display: flex;
    gap: 15px;
    button {
        border-style: none;
        background: none;
    }
}
}


main{
    background-color: $primary-color;
}

footer {
    background: #FA9500;
    width: 100%;
    height: 250px;
}



que bueno que pusieron esa secci贸n de apuntes en los videos, aqu铆 los mios, muy buenos tips de la profe, esa de gap no me la sab铆a:

17:25 - Cuando dice en el min 17:25 que est谩 creciendo mucho este padding, es porque no puso en el selector universal * el box-sizing: border-box

13:53 - ctrl + F para buscar y remplazar

05:37 - Cuando pone div en los 3 bottons, les paso un tip, seleccionan los 3 buttons, luego presionan ctrl + shift = p, despues escriben 鈥渨rap + enter鈥, luego div + enter

18:17 - gap es para manejar los espacios entre el eje x y el eje (esto tal vez me puso servir hace poco)

17:20 - sigo sin entender porque no usa el figma para saber exactamente cuantos pixeles usar谩, en lugar de decir yo calculo que son unos 15px (min 17:20)

16:11 - space-between era lo que ocupaba hace poco y no me acordaba

Trabajar con SCSS ofrece numerosas ventajas, y una de las caracter铆sticas m谩s 煤tiles es la capacidad de anidar selectores. Esta t茅cnica permite organizar el c贸digo de manera m谩s clara y estructurada, lo que facilita el mantenimiento y la comprensi贸n del estilo. En resumen, trabajar con SCSS y aprovechar el anidamiento es una pr谩ctica altamente beneficiosa que mejora la eficiencia y la calidad del c贸digo CSS.
Lo hice de otra manera. Ac谩 comparto mi c贸digo 馃憞 **HTML** ```js <nav class="navbar"> </nav> ```**CSS** ```js primary-color: #FFEFE7; $secondary-color: #FFDAC6; $tertiary-color: #BABD8D; $primary-text-color: #7C6A0A; $font-stack: 'IBM Plex Sans', sans-serif; $body-font: 1.6rem; *{ box-sizing: border-box; } html{ font-size: 62.5%; } body{ margin: 0; padding: 0; background-color: $primary-color; font-family: $font-stack; font-size: $body-font; } .navbar{ width: 100%; height: 100px; display: flex; justify-content: space-between; align-items: center; color: $primary-text-color; padding: 15px; &__logo{ text-decoration: none; color: $primary-text-color; h1{ font-size: 2rem; font-weight: 500; } } &__menu{ display: flex; gap: 15px; margin: 0; &-item{ list-style: none; } &-link{ text-decoration: none; } &-icon{ color: $primary-text-color; } } } ```
驴Cu谩les son las respuestas a las preguntas del examen "驴Qu茅 es un preprocesador?" y "驴Para qu茅 sirven las at-rules?"? He seleccionado todas las respuestas y me siguen dando error, no puedo avanzar el examen por eso.
### **At Rules: CSS y nesting** Es una declaraci贸n que cumple con diferentes funciones, se inicializa con el s铆mbolo @ y cuenta con sintaxis propia. Las at-rules dentro de Sass ayugan a mantener la compatibilidad con pr贸ximas versiones de CSS. ### Ejemplos de **At Rules** * @use: importa, modulos estilos y funciones de otras hojas de estilos. * @import es que import se encarga de hacer los estilos globales. * @function: permite crear funciones personalizadas, sin embargo Sass cuenta con funciones ya existentes. * @forward: Recibe como parametro una URL y nos ayuda a cargar los estilos de nuestra hoja de estilos, es muy importante hacer uso de @use para que los modulos esten disponibles en nuestra hoja de estilos. * @extend: tiene que ver con el concepto de herencia. * @at-root: se encarga de cargar nuestros estilos en el root del css. * @include: nos ayuda a invocar los mixins. * @error, @warn @debug: sirver para cuando hay un error, una advertencia o se quiere debugear, respectivamente * @for, @if, @each, @while: tienen que ver con estructuras de control, se pueden usar dentro de una funci贸n ### Nesting * La anidaci贸n permite tener selectores dentro de otros, lo cual nos ayuda a simplificar c贸digo. * Escribiendo los selectores en el orden que aparecen en el HTML.

- Este curso tiene bastantes errores de edici贸n de v铆deo. -

Segundo curso de Sass que tomo en platzi y tampoco me est谩 gustando.
Demasiado relleno y poca aplicaci贸n
En esta clase se ven los At-rules pero no se ve su uso real
Que lean la definici贸n no me ayuda a aprender c贸mo usarlos
Espero que alg煤n d铆a saquen un curso de pre procesadores bien.

El nesting en la practica es lo mejor cuando incluyes pseudo-clases ya que te permite tener una vista general de las pseudo-clases que tienes para cada selector, por ejemplo:

.btn {
    cursor: pointer;
    color: white;
    font-size: 1rem;
    transition: all 0.4s ease-in-out;

    i {
        margin-right: 8px;
    }

    &:hover {
        background-color: $primario;
        color: $secundario;
        border: 1px solid $secundario;
        transition: all 0.4s ease-in-out;
        font-weight: 800;
    }

    &:active {
        color: white;
        border: 1px solid white;
        transition: all 0.4s ease-in-out;
    }
}

El simbolo $ se refiere al selector principal y a este le a帽ades la pseudo-clase o el pseudo-elemento que desees directamente. De esta forma, tu codigo se ver谩 mucho m谩s bonito y organizado. 馃槉馃

Me gusta mucho SASS, el orden y lo f谩cil que puede ser leer el c贸digo.

El video anterior dura 18 minutos, este 19鈥 Favor mantener el standar de 10 minutos para no hacer pesada una clase.

<div class="icons"> <button class="profile"> <svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

muy buena la clase pero porq menciona cosas obvias 馃ズ

El curso hasta aqu铆, me ha gustado, pero una clase de 20 min es mucho, prefiero 2 de 10 min.