SCS에서 두통을 피하는 6가지 팁

.button {
  // these properties wouldn't be necessary with reset.css
  background-color: transparent;
  border: none;
}

4. 변수로 건조 유지

// we can change $module at any time in one place
$module: 'nav';

.#{$module} {
  &__dropdown-link {
    position: relative;
  }

  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: hidden;
    
    .#{$module}__dropdown-link:hover & {
      display: block;
    }
  }

// above css applied to html, for reference

<li class="nav__dropdown-link>
  <a>Link title</a>
  <ul class="nav__dropdown">
    ...
  </ul>
</li>

5. 자리 표시자 사용

// these styles...

%t-1\/2 {
  font-size: 14px;
  line-height: 1.786;
}

%t-1 {
  font-size: 18px;
  line-height: 1.722;
}

%t-2 {
  font-size: 23px;
  line-height: 1.652;
}

// ...can be easily reused for different breakpoints
.t {
  &-1 {
    @extend %t-1\/2;
    @screen lg { // @screen is a tailwind directive - these are just desktop-first breakpoints!
      @extend %t-1;
    }
  }
  &-2 {
    @extend %t-1;
    @screen lg {
      @extend %t-2;
    }
  }
}

6.<main>에서

// index.html

<main>
  <section class="section section--bg-primary">
    <div class="section__inner">
      <h2>Hello world!</h2>
      <p class="paragraph">
        Lorem ipsum dolor sit amet...
      </p>
    </div>
  </section>
  <section class="section section--bg-secondary">
    <div class="section__inner">
      <h2>Hello again world!</h2>
      <p class="paragraph">
        Lorem ipsum dolor sit amet...
      </p>
    </div>
  </section>
</main>

// layout/_section.scss

.section {
  // use the parent element to add padding
  padding: 48px 16px;

  &--bg-primary {
    background-color: $color-primary;
    color: white;
  }
  
  &--bg-secondary {
    background-color: $color-secondary;
    color: black;
  }

  &__inner {
    // set the max-width on the inner element
    max-width: $max-w-page;
    width: 100%;
    margin: 0 auto;
  }
}