SCSS Nested Styling Example

applly above scss nested

.project-grid-container {
  .grid-item {
    h4,
    p {
      color: $color-primary;
    }
  }
}

### Explanation:
– The `project-grid-container` is the parent selector.
– Inside it, the `grid-item` is nested.
– Then, the `h4` and `p` selectors are grouped under `grid-item` to apply the same `color` property.

}
.project-grid-container
{
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 16px; /* space between grid items */
padding: 16px;
}
.filters-grid
{
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 16px; /* space between grid items */

}

.project-grid-container .grid-item {
background-color: $color-white;
border: 1px solid $color-white;
box-shadow: 0 0 5px 5px $color-lightgray;
text-align: center;
border-radius: 8px;
}

.project-grid-container {
.grid-item {
h4,
p {
color: $color-primary;
}
}
}

convert in scss

.grid-container {
  display: grid;
}

.project-grid-container {
  grid-template-columns: repeat(3, 1fr); // 3 equal columns
  gap: 16px; // space between grid items
  padding: 16px;

  .grid-item {
    background-color: $color-white;
    border: 1px solid $color-white;
    box-shadow: 0 0 5px 5px $color-lightgray;
    text-align: center;
    border-radius: 8px;

    h4,
    p {
      color: $color-primary;
    }
  }
}

.filters-grid {
  grid-template-columns: repeat(3, 1fr); // 3 equal columns
  gap: 16px; // space between grid items
}

### Improvements:
– Nesting styles logically under parent selectors for better readability and maintainability.
– Removed duplicate `.project-grid-container` definitions by nesting the `.grid-item` and its child styles (`h4`, `p`) directly.

.text-small
{
font-size: $body-text-small;
}

h1,h2,h3,h4,h5
{
font-family: $font-medium;
}

h1
{
font-size:$h1-font-size-desktop;
}

h2
{
font-size:$h2-font-size-desktop;
}
h3
{
font-size:$h3-font-size-desktop;
}
h4
{
font-size:$h4-font-size-desktop;
}
h5
{
font-size:$h5-font-size-desktop;
}

p {
  font-family: $font-regular;
}

.text-small {
  font-size: $body-text-small;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: $font-medium;

  &.h1 {
    font-size: $h1-font-size-desktop;
  }
  &.h2 {
    font-size: $h2-font-size-desktop;
  }
  &.h3 {
    font-size: $h3-font-size-desktop;
  }
  &.h4 {
    font-size: $h4-font-size-desktop;
  }
  &.h5 {
    font-size: $h5-font-size-desktop;
  }
}

### Key Changes:
– **Nesting**: Grouped `h1`, `h2`, `h3`, `h4`, and `h5` under a single block for shared styles like `font-family`.
– **SCSS Ampersand (&)**: Used `&` to define specific font sizes for each heading level while keeping the structure hierarchical.

This makes it easier to manage typography styles and quickly identify changes needed for heading tags.