Modularización de estilos CSS con @rules en SASS

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

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