scss ~ 중첩 구조 ~

scss를 사용하는 이점은 몇 가지 있습니다만 대표적인 것에 중첩이 있군요.
그럼 보자! !

index.html

<link rel="stylesheet" href="sample.css">
<section>
  <div class="case1">あいうえお</div>
  <div class="case2">かきくけこ</div>
</section>

CSS 로딩을 잊지 않도록! !

글쎄! 그럼 scss를 쓰자! !

main.scss

section {
  background-color: pink;
  .case1 {
    background-color: rebeccapurple;
    .case2 {
      background-color: royalblue;
    }
  }
}

평소라면 이것으로 브라우저 표시합니다만, 이것으로는 아직 반영되지 않습니다 🥲

여기에서 터미널을 엽니다 👌

% sass scss/main.scss:css/main.css
% less css/main.css

이 흐름이었습니다! ! 각각은 어떤 의미가 있는지는
▶ htps : // 이 m/아카리_0618/이고 ms/14f53아8b3586785f15b3
이 기사를 참조하십시오 👍

브라우저에서 열고 이렇게되면 괜찮습니다! !
완벽하네요 😊

이 문제에 관하여(scss ~ 중첩 구조 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akari_0618/items/ff4eeae61cc354338de6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다