[SCSS, SASS] 기본 문법

1. 중첩, 상위선택자 참조

.container {background: yellow;

    h1{background:none; color: #000;
        &:hover{color:#fff}
    }

    p{color:tomato;
        font: {
            size: 20px;
            weight:bold;
        }

        span{background:burlywood;}
    }
}

- &가 상위선택자를 가리키는 일을 함.

- font-size, font-weight와 같이 중복되는 속성도 묶어서 스타일 주기 가능.

.container {
  background: yellow;
}
.container h1 {
  background: none;
  color: #000;
}
.container h1:hover {
  color: #fff;
}
.container p {
  color: tomato;
  font-size: 20px;
  font-weight: bold;
}
.container p span {
  background: burlywood;
}

2. 변수

$main_color: orange;

.btn_box {
    button:nth-child(1) {width: 100px; background:$main_color;}
    button:nth-child(2) {width: 200px; background:$main_color;}
    button:nth-child(3) {width: 300px; background:$main_color;}
}

- 변수명으로 색깔을 정해놓으면 활용성이 높음

 

3. 믹스인 @mixin

@mixin box_style($bg_color:yellow, $font_color:green) { //인자에 기본값을 주면 해당 값에 인자를 넣지 않아도 오류 안남
    width: 100px; 
    height: 100px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    background:$bg_color; 
    border: 1px solid #ccc;
    color: $font_color;
} 


.one {@include box_style;}
.two {@include box_style(purple, #000)}


%myPlaceholder {
  color: blue;
  font-weight: bold;
}

.myClass {
  @extend %myPlaceholder;
  font-size: 16px;
}

- mixin을 사용해서 반복되는 속성을 정의하고 include해서 사용하면 됨.

- mixin과 %가 헷갈려서 찾아봤는데 같은 기능을 하지만 인자를 이용해서 속성을 바꾸고 싶으면 mixin을 같은 속성을 여러개에 사용하려면 %을 사용하는 것 같음.