At Rules: CSS y nesting

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

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

Yo lo hice así 😛

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

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

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

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:

• “Nesting” 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 “wrap + 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

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