프론트엔드 멘토로 꾸준히(요즘은 일하느라 조금은 빼먹으며..) 시안을 받아 퍼블리싱을 하고있다 :)
회사에서는 SCSS를 사용하지 않는다. 하지만 나는 SCSS가 좋고 계속 쓰고 싶어서 혼자 개인 포폴을 만들며 사용한다!
그리고 그냥 쓰지말고 블로그에 기록을 남겨보려 한다 ;)

SCSS 반복문 사용하기

사용하고자 한 영역은 이미지의 메뉴 속 아이콘들이다. 만약 저 아이콘들의 색상을 li를 하나, 하나 잡고 일일이 바꾼다면? 많지 않은 양이니 그럴순 있지만, 단축시키는 방법을 알고 있다면 쓰는것이 좋다고 생각한다.

코드

$colors: (#726CEE, #4BB1DA, #EDD556, #8E4CB6);
@each $color in $colors {
  $i: index($colors, $color);
    li:nth-child(#{$i}) {
      a {
      .material-icons {
      	color: #{$color};
      }
    }
  }
}

코드풀이

1. 배열선언 : $colors: (#726CEE, #4BB1DA, #EDD556, #8E4CB6);
   이것은 마치 자바스크립트에서 const colors = ['#726CEE', '#4BB1DA']; 이런식으로 배열을 선언한것과 비슷하다. 들어간 값들은 아이콘 각각의 컬러이다. 그리고 여기에서의 괄호는 생략이 가능하다.

2. each문 사용 : li에 반복적으로 값을 넣을 예정이므로 each문을 돌릴 때 반복을 시작할 코드를 감싸야한다. 그리고 이 과정에서 내가 제대로 반복문을 씌운건지 확인이 하고싶다면 사스마이스터에서 확인을 하면 좋다.

   • @each : 반복문의 시작을 선언
   • $color : colors배열안의 값들을 불러올 변수
   • in $colors : 데이터값 (자바스크립트의 for in 문과 비슷하다고 생각하면 이해하기 좋다.)
   • $i: index($colors, $color) : 배열의 index값을 불러오는 내장 함수(1,2,3,4와 같은 숫자를 불러올 수 있기 때문에 nth-child를 사용할 수 있었다.)
   • #{$i} : 변수명이 들어가야하는 곳에 문자보간을 해주는 것
   • #{$color} : 위와 동일하다. i, color는 변수명을 의미한다. 즉 이름은 자유롭게 지정할 수 있다.

3. 사스마이스터 활용

좌측에 SCSS코드를 넣으면 우측에 CSS로 어떤식으로 변환되는지를 보여준다. 하여 SCSS가 적용이 안되고, 원인을 못찾을 때 사스마이스터를 활용하면 코드가 어떻게 변환되고 있는지를 보면 문제를 찾을 수 있다.

---

소박한 코드지만 SCSS의 이점을 잘 이용한 부분이라고 생각한다 :)