qwef

.box{ $size : 100px; position: fixed; top: $size; .item{ $size:200px; width: $size; height: $size; transform: translate($size); background-color: orange; } } 이렇게 지역변수로 쓸 수 있음. 또, 재선언도 가능함. 참고로 얘는 호이스팅이 안됨.

.box{ font : { weight: bold; size: 40px; family: sans-serif; } margin : { top:100px; left:200px; left: 200px; } background: { color: orange; } } 이렇게 네임스페이스로, font-weight, font-size 등 그렇게 되는거임.

// 이 주석은 컴파일 시 삭제 /**/ 이거는 유지

$color-black : #000; $color-white : #fff; body{font-family: 'Noto Sans KR', sans-serif; background-color: $color-black;} h1{color: $color-white;} h1+img:nth-of-type(1) {background-color: rgb(248, 0, 124); width: 100px;} 그냥 $변수명 : 값 하면 됨. 쓸때도 $변수명 하면 됨.

.container{ h1 { } } 이런 식으로 씀 부모자식 관계 $color-black : #000; $color-white : #fff; body{font-family: 'Noto Sans KR', sans-serif; background-color: $color-black;} .container{ h1{ color: $color-white; & + img { width:350px; } } } &는 자기 자신임. scss는 html에 연결하면 자동으로 종속성 깔리게끔 해놨나 봄.

div { width: 600px; height: 200px; border: 1px solid #808080; h3 { font-size: 32px; color: #ffa500; &+p{ color: #333; font-size: 20px; } } } &란 자기 자신을 뜻함. h3 내에서 &를 썼으니 h3이 & div { width: 600px; height: 200px; border: 1px solid #808080; } div h3 { font-size: 32px; color: #ffa500; } div h3 + p { color: #333; font-size: 20px; } css로 빌드 된 파일임. &가 자기 자신보다 부모. 라는게 더 정확함. .container &{ h1{ color:$colo..