Nesting y @rules de Sass en navbar
Contenido del curso
Instalación y configuración del entorno de trabajo
Reglas y uso
Expresiones
Proyecto: sección main
Herencia en SASS
Mixins
Funciones
Proyecto
Deploy
Extras
Nesting y @rules de Sass en navbar
Nesting y @rules de Sass en navbar
Contenido del curso
LEONARDO FERNANDEZ
Rubén Vega
Daniel Zavala Taipe
Joel Dominguez Merino
Ana María Díaz
ProfesorJoel Dominguez Merino
Nicolas Neira
Benjamin Allen Ramirez Horna
iecgerman .
Anderson Ollarves
----- ----
iecgerman .
iecgerman .
iecgerman .
Ángela Sofía Osorio García
Ángela Sofía Osorio García
Jesus Sierra
Hernan Camilo Rodriguez Jimenez
Daniel Santiago Forero Torres
Neil Ruiz
Ramses jecsan
Natanael Borge Guerrero
Ramses jecsan
Mariam Rosal
Juan Cortez
Miguel de la Cruz
Oscar David Rodríguez manjarres
iecgerman .
Juan Pablo Grisales Quintero
iecgerman .
Rubén Vega
iecgerman .
Kenneth Angulo L
Kamilo Stevan Alomías Correa
Gracias por el resumen, Leonardo! :)
Sabes cuál es la respuesta del examen sobre para qué sirven las at-rules? he hecho el examen varias veces marcando diferentes respuestas y ninguna es la correcta.
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
Me agrada bastante la manera en la que lograste implementar Mobile first, muchas felicidades Joel!!
Mil gracias teacher 🥹
Tipos de At-rules y ejemplos
.
@keyframes, @transition, y @animation.
.@media, @import, y @charset.
.@variable, @mixin, y @include.
.@font-face, @font-feature-values, y @font-size-adjust.
.@-webkit-keyframes, @-moz-document, y @supports.
.@grid, @flexbox, y @supports.
.@page, @namespace, y @document.@color-profile, @counter-style, y @mask.
.@image, @media-document, y @media-rules.
.@charset, @viewport, y @scope.
.@scroll-timeline, @pointer, y @input-placeholder.
.@debug, @warn, y @error.Oigan se acuerdan del pro tip que puso el profe Diego en su curso de html y css sobre el font-size 62.5% en el html? se le aplicaria aquip
no lo esta aplicando, eso es para usar medidas rem en lugar de px.
yo hice el proyecto completo en la clase pasada, comence desde movil y lo fui modificando con breakpoints en tablets y pc; ese uso de medidas rem para las fuentes si ayuda mucho.
Yo lo hice así :P
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
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
No entendí la razón de copiar y pegar el svg dentro del html
<img src="./assets/svg/profile.svg" alt="">
¿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.
Tengo la misma pregunta.🤔
Es lo mismo, pero en términos de estética es mejor agregar una etiqueta de imagen y agregar la ubicación del logo, yo lo hice de esta forma, aunque existen varias maneras de hacerlo como por ejemplo con etiquetas de link a y agregarle una imagen de fondo mas la activación del curso y así no utilizar un botón
A los que no les aparezca el svg en VS tienen que abrir el archivo en el bloc de notas y copiar el texto svg
Una lástima que no se hubiera utilizado las especificaciones definidas en el diseño de Figma de este proyecto, para iniciar desde la versión mobile. Parece que toda la maquetación que se construirá es la de la versión desktop sin utilizar los valores del diseño.
tengo una pregunta como puedo mover la etiqueta <svg> en css hacia l izquierda y que me aparezca en mi navegador que lo que queria es que se mueva hacia la izquierda
El problema está en que tu etiqueta <svg> no forma parte de la clase .nosotros-section, y lo estas anidando en ella.
Gracias
Lo hice de otra manera. Acá comparto mi código 👇
HTML
<nav class="navbar"> <a href="/" class="navbar__logo"> <h2>Eco-store</h2> </a> <ul class="navbar__menu"> <li class="navbar__menu-item profile"> <a href="/" class="navbar__menu-link"> <img src="./assets/svg/profile.svg" class="navbar__menu-icon" /> </a> </li> <li class="navbar__menu-item wishlist"> <a href="/" class="navbar__menu-link"> <img src="./assets/svg/heart.svg" class="navbar__menu-icon" /> </a> </li> <li class="navbar__menu-item cart"> <a href="/" class="navbar__menu-link"> <img src="./assets/svg/shopping-cart.svg" class="navbar__menu-icon" /> </a> </li> </ul> </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; } } }
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"> <h2>Eco-Store</h2> </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:
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; } }
gracias mi pana
¿Qué clase me brinque que yo no tengo la carpeta con los svg? (min 5:51)
Está en la clase anterior (por si aún lo necesitas o alguien más) en la sección de recursos.
gracias @jpablogris17 si me di cuenta despúes, saludos.
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
Principales @rules
@use: carga módulos, estilos y funciones. Es la alternativa moderna a @import.@function: crea funciones personalizadas.@forward: expone módulos para que puedan ser utilizados mediante @use.@extend: permite compartir estilos entre selectores.@at-root: coloca estilos directamente en la raíz del CSS compilado.@include: ejecuta un mixin.@if, @for, @each, @while: permiten implementar lógica y ciclos.@error, @warn, @debug: ayudan a detectar problemas durante la compilación.Si al abrir el SVG les muestra la imagen y no el código, deben dar clic en este botón para poder verlo
