[Scss] 변수, Referencing Parent Selectors

1. 변수 선언

// $[name]: [value];

$BLACK: #262626;
$WHITE: #FFFFFF !default;

자주 쓰이거나 의미 있는 속성값들을 원하는 이름으로 변수에 담아서 쓸 수 있다.
자바스크립트 변수처럼 global과 local의 개념이 적용되기 때문에 중괄호 밖에서 선언한 변수는 아무데서나 쓸 수 있고, 중괄호 안에서 선언한 변수는 해당 중괄호 내에서만 사용 가능하다

!default를 붙이면 변수 사용 못하게 막는다

2. Referencing Parent Selectors (부모 참조 셀렉터) & 중첩

.bg {
    background-color: $color;
    font-size: $font;
    color: #000;
    &:hover {
        color: rgb(67, 139, 0);
    }

    &::after {
        color: yellow;
    }

    &.color {
        color: cornflowerblue;
    }

    &#color2 {
        color: aqua;
    }

    &[id="text"] {
        color: cornsilk;
    }
}

.latte {
	.cappuccino & { //접미사로 사용된 예시
		font-size: 11px;
	}
}

.give_me_a {
    &-espresso { 
        color : red;
    }
    .please &-americano { 
        color : orange;
    }
}

// result
.bg {
  background-color: #b6b6ff;
  font-size: 24px;
  color: #000;
}
.bg:hover {
  color: #438b00;
}
.bg::after {
  color: yellow;
}
.bg.color {
  color: cornflowerblue;
}
.bg#color2 {
  color: aqua;
}
.bg[id=text] {
  color: cornsilk;
}

.cappuccino .latte {
  font-size: 11px;
}

.give_me_a-espresso {
  color: red;
}
.please .give_me_a-americano {
  color: orange;
}