문제 우리가 웹의 마크업 작업들을 하다 보면, 반복되는 스타일의 요소 배열들이 이따금씩 나타나는데 이때마다 우리는 nth-child 혹은 nth-of-type 등과 같은 가상선택자를 이용해서 하나씩 따로따로 스타일을 줬어야만 했다. 그 요소들이 2~3개라면 괜찮은데 5개 이상의 요소라면 코드를 치는 사람도, 보는 사람도 지저분하게 보일 수 있다. 이 때, 자바스크립트의 for문처럼 반복되는 스타일을 하나로 묶어버릴 수 있는 기능이 바로 SCSS의 @for문이다. 방법 종료 직전까지 반복 (from A to B) /* SCSS */ @for $i from 1 to 6 { div:nth-child(#{$i}){ width: $i * 100px; background-image: url("./images/ico..

문제 /* SCSS */ @mixin box-sizing { & > div { width: 100px; height: 100px; border-radius: 1px solid #000; } } .box-wrap { @include box-sizing; } /* CSS */ .box-wrap > div { width: 100px; height: 100px; border-radius: 1px solid #000; } HTML 구조는 큰 틀인 .box-wrap안에 작은 div가 여러 개 있다고 가정하겠다. 우리는 작은 div들의 공통된 속성을 @mixin을 이용하여 주려고 한다. 전에 배웠듯이 @mixin 안에 div 요소들에게 줄 스타일 속성들을 묶어 선언하였고, .box-wrap에 @include 해주었다..

문제 // SCSS $box-color: red; .box { background-color: $box-color; } 클래스 이름이 box인 div 요소가 100개 있다고 하자. 100개의 박스 색상을 한 번에 컨트롤하기 위해서 나는 box-color라는 변수를 만들어서 100개의 박스의 background-color에 해당 변수의 값을 넣어 주었다. 따라서, 색상을 바꾸고 싶을 때는 box-color라는 변수에 값만 딱 바꿔주면서 간단히 수정할 수 있었다. 그런데 만약에 50개는 0.3의 투명도를 가지게 하고, 나머지 50개는 0.7의 투명도를 갖게 하라는 요청이 들어온다면 우리는 이 box-color라는 하나의 변수를 가지고 어떻게 대응할 수 있을까? 방법 // SCSS $box-color: red..

개념 SCSS에서 변수는 $변수명: 값의 형태로 간단히 선언할 수 있다. 또한, 당연히 1개의 변수에 1개의 값만 저장할 수 있었다. 하지만, get-map() 내장 함수를 사용하면 1개의 변수에 여러 개의 값을 선언할 수 있다. 마치, 자바스크립트의 배열이나 객체처럼 말이다. 방법 $color: ( primary: #333, secondary: #666, focus: #ff0000 ); body { color: get-map($color, primary); } h1 { color: get-map($color, focus); } 먼저, 변수를 선언하는 방법은 $변수명: (변수1: 값1, 변수2: 값2...)의 형식으로 선언해주면 된다. 참고로 변수를 선언할 때 주의할 점은 중괄호{}가 아닌 소괄호()라는..

개념 앞에서 배운 @mixin과 비슷한 기능을 가진 문법이 있다. 바로 @extend이다. 어떻게 쓰이는 지는 바로 예시를 통해 알아보자. 방법 @extend 클래스(.) 사용 /* SCSS */ .btn { border: 1px solid #000; background-color: #fff; width: 150px; line-height: 30px; outline: none; cursor: pointer; color: #fff; } .a-btn { @extend .btn; background-color: skyblue; border-color: blue; } /* Compiled CSS */ .btn, .a-btn { border: 1px solid #000; background-color: #fff;..