본문 바로가기

프론트엔드 공부/scss

scss 간단 표기법과 주석처리,자식선택자(>)사용

변수명 $변수명

주석처리는 두가지방법 /**/, //이 있으나 //의 경우 컴파일시 css에 표기가 안됀다.

$color:tomato;
.container{
  h2{
    color:$color;
    /*scss는 두가지 주석처리방법이있는데 첫번째 방법이 컴파일시 주석처리 표기가 됨으로 이를 많이 사용한다*/
    /*background:black;*/
    //이표기법은 scss에서만 적용되는 주석처리
    //font-size:60px;
  }
}
//자식선택자 선택시 꺽쇄로 직접선택도가능
.container{
  >ul{
    >li{
      font-size:40px;
      .name{
        color:royalblue;
      }
      .age{
        color:orange;
      }
    }
  }
}