프론트엔드 공부/scss (10) 썸네일형 리스트형 상위선택자참조&(-,:), 네임스페이스 동일한경우의 중첩 //scss .btn{ position:absolute; &.active{ color:red; } } .list{ li{ &:last-child{ margin-right:0; } } } //css .btn { position: absolute; } .btn.active { color: red; } .list li:last-child { margin-right: 0; } //scss .fs{ &-small {font-size:12px;} &-medium {font-size:14px;} &-small {font-size:16px;} } //css .fs-small { font-size: 12px; } .fs-medium { font-size: 14px; } .fs-small { font-size: 16px;.. 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; } } } } 이전 1 2 다음
