Using CSS nesting

/* 중첩 선택자를 사용하는 경우 */
parent {
  /* 부모 스타일 */
  child {
    /* 부모의 자식 스타일 */
  }
}

/* 중첩 선택자를 사용하지 않는 경우 */
parent {
  /* 부모 스타일 */
  & child {
    /* 부모의 자식 스타일 */
  }
}

/* 브라우저는 위 두 방법을 각각 아래 예시처럼 파싱합니다. */
parent {
  /* 부모 스타일 */
}
parent child {
  /* 부모의 자식 스타일 */
}

<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>

form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input {
  /* label 외부에 있는 input 을 위한 스타일 */
  border: tomato 2px solid;
}
label {
  /* label 을 위한 스타일 */
  font-family: system-ui;
  font-size: 1.25rem;
  input {
    /* label 내부에 있는 input 을 위한 스타일 */
    border: blue 2px dashed;
  }
}

<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>

form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input {
  /* label 외부에 있는 input 을 위한 스타일 */
  border: tomato 2px solid;
}
label {
  /* label 을 위한 스타일 */
  font-family: system-ui;
  font-size: 1.25rem;
  & input {
    /* label 내부에 있는 input 을 위한 스타일 */
    border: blue 2px dashed;
  }
}

<h2>Heading</h2>
<p>첫번째 단락입니다.</p>
<p>두번째 단락입니다.</p>

h2 {
  color: tomato;
  + p {
    color: white;
    background-color: black;
  }
}
/* 이 코드는 & 중첩 선택자를 이용하여 작성할 수도 있습니다. */
/* 
h2 {
  color: tomato;
  & + p {
    color: white;
    background-color: black;
  }
}
*/

.a {
  /* class="a" 를 가진 요소를 위한 스타일 */
  .b {
    /* class="a"의 자손인 class="b" 요소에 대한 스타일 */
  }
  &.b {
    /* class="a b" 를 가진 요소를 위한 스타일 */
  }
}

/* 브라우저는 다음과 같이 파싱합니다. */
.a {
  /* class="a" 를 가진 요소를 위한 스타일 */
}
.a .b {
  /* class="a"의 자손인 class="b" 요소에 대한 스타일 */
}
.a.b {
  /* class="a b" 를 가진 요소를 위한 스타일 */
}

<div class="notices">
  <div class="notice">
    <h2 class="notice-heading">Notice</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice warning">
    <h2 class="warning-heading">Warning</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice success">
    <h2 class="success-heading">Success</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>

.notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  margin: auto;
}

.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;
  .notice-heading::before {
    /* `.notice .notice-heading::before` 와 동일합니다. */
    content: "ℹ︎ ";
  }
  &.warning {
    /* equivalent to `.notice.warning` */
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
    .warning-heading::before {
      /* `.notice.warning .warning-heading::before` 와 동일합니다. */
      content: "! ";
    }
  }
  &.success {
    /* `.notice.success` 와 동일합니다. */
    background-color: #004d40;
    border-color: #004d40;
    color: white;
    .success-heading::before {
      /* `.notice.success .success-heading::before` 와 동일합니다. */
      content: "✓ ";
    }
  }
}

<div>
  <span class="foo">text</span>
</div>

<div class="bar">
  <span class="foo">text</span>
</div>

.foo {
  /* .foo 스타일 */
  .bar & {
    /* .bar .foo 스타일 */
  }
}

<div class="wrapper">
  <article class="card">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card featured">
    <h2>Card 2</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card">
    <h2>Card 3</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  font-family: system-ui;
}

.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* `.card h2` 와 동일합니다. */
    color: slateblue;
    .featured & {
      /* `:is(.card h2):is(.featured h2)` 와 동일합니다. */
      color: tomato;
    }
  }
}

.component {
  &__child-element {
  }
}
/* In Sass this becomes */
.component__child-element {
}

.my-class {
  element& {
  }
}

/* 브라우저는 이것을 결합 선택자가 되도록 파싱합니다. */
.my-class {
}
element.my-class {
}

.parent {
  /* .parent 스타일은 유효합니다. */
  & %invalid {
    /* 무효한 %invalid 스타일들은 무시됩니다. */
  }
  & .valid {
    /* .parent .valid 스타일은 유효합니다. */
  }
}