Responsive four card feature using Grid and Scss

Community feedback

• 

  P

  Gabe•300

  @gabeiPosted 17 days ago

  Hey nice job!

  To answer your question about SCSS nesting:

  Usually the benefit of nesting in SCSS is the ability to append class names under the parent element. This is especially apparent when using a CSS methodology like BEM.

  For instance, if you had a paragraph tag with a .card__text class listed under your .card element, you might wright something like:

  .card {
     border: 1px solid black;
  
     &__text {
        padding: 2rem;
     }
  }
  

  This would output to:

  .card { styles here }
  .card__text { styles here }
  

  This can allow you to sort your CSS into a module-like arrangement, where all associated code is bundled together under a .card element at the top.

  Expanding on that idea is then quite easy:

  &__text {
     padding: 2rem;
     &--bold {
       font-weight: 800;
     }
  }
  

  outputs to:

  .card__text--bold { font-weight: 800 }
  

  And so on and so forth.

  I hope this helps - happy coding!

  Marked as helpful

  0