본문 바로가기

프론트엔드 공부/scss

상위선택자참조&(-,:), 네임스페이스 동일한경우의 중첩

//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;
}
/*네임스페이스가 동일한 경우의 중첩*/

.box{
    font:{
        weight:bold;
        size:10px;
        family:'Poppins';
    };
    margin:{
        top:10px;
        left:10px;
    };
}