SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게.

SCSS가 무엇인가요? CSS를 좀 더 깔끔하고 예쁘고 편하게 작성하도록 도와주는 전처리기다.

설치, 적용 방법의 경우 vscode를 사용하는 사람이라면 여기가 가장 설명이 잘 되어있는 것 같다. 나머지는 직접 찾아보도록 합시다.

 

나는 이 깜찍한 html을 토대로 SCSS의 기초적인 내용들을 설명하도록 하겠다.

세가지를 다룰 예정이다.

기본 작성법, extend와 mixin, 그리고 부트스트랩의 row와 col을 반복문으로 구현하기.

모두 쉬운 내용이다.

 

1) 기본 작성 방법

한 컷으로 이해하는 기본 작성 방법.

css의 root 활용과 비슷하게 $변수명을 사용하여 미리 입력된 값을 불러와 사용할 수 있다. 다만 훨씬 눈에 잘 들어오고 깔끔하다.

css와 달리 클래스 내부의 요소를 일일히 새로 클래스를 불러와 지정하는 것이 아니라 대괄호 안에서 여러 요소에게 각각의 값을 지정할 수 있다.

여기까지 알면 기본 작성법은 끝.

 

아, 그리고 대괄호 안에서 클래스에게 hover를 지정해주고 싶다면 &:hover로 지정해준다.

이제 정말 끝. 다음은 extend와 mixin이다.

 

 

 

2) extend와 mixin

extend부터 보고 넘어가자. @extend를 사용하면 해당 클래스의 css 설정 값을 그대로 불러와서 적용할 수 있다.

그런데 실제로 존재하는 클래스가 아닌 가상 클래스를 지정하여 미리 값을 입력하고 필요할 때마다 꺼내서 사용할 수도 있다.

우측의 스크린샷에 보이는 것처럼 실제로 존재하지 않는 %card라는 가상 클래스에 미리 공통된 값을 적용해준 뒤 실존하는 클래스에 불러와서 사용하는 것이다.

 

@include 밑에 background-color 설정이 있는 것은 실수로 지우지 않은 것이다.

다음은 mixin이다. extend와 다른 점은 파라미터 위치를 지정해두고 변경해가며 사용할 수 있다는 것이다.

사실 mixin도 파라미터를 지정해주지 않고 그냥 사용하면 extend와 똑같이 사용할 수 있다.

파라미터값을 지정하지 않은 mixin을 남발하는 것은 좋지 않은 습관이라고 하는데.. 일단 가능은 하다.

 

마지막으로 SCSS로 Bootstrap의 row와 col을 구현해보도록 하자.

 

 

 

3) SCSS로 row와 col 직접 구현하기

 

 

반복문이 없었다면 좌측의 css창에 보이는 것처럼 하나하나 직접 입력해야 했을 것이다.

그러나 반복문을 활용하면 아주 간단하게 해낼 수 있다.

 

@for $i from 1 through 12 { // i에 1부터 12까지의 숫자를 순서대로 대입해주세요
  .col-#{$i} {
    width: (100%/12) * $i; // 1부터 12까지 모든 숫자가 대입될 때까지 계산을 반복해주세요
  }
}

이런 뜻이다. 쉽죠?

참고로 from 1 through 12라고 작성할 경우 1부터 12까지 대입해주세요~라는 뜻이고 from 1 to 12라고 작성할 경우 1부터 12미만까지 대입해주세요~라는 뜻이다.

to를 쓰고 싶으면 from 1 to 13이라고 적으면 된다.

 

row같은 경우는 나는 flex를 활용했지만 굳이 그래야할 이유는 없다. 아무튼 가로로 일정 비율 세우기만 하면 되는 거니 무얼 활용하든 기능만 정상 작동하면 된다. padding을 주든 margin을 주든 알아서 하면 됩니다.

 

진짜진짜 마지막으로 bootstrap의 기능인 row-md-3 이런 거 한 번 구현해볼까요?

 

미디어 쿼리에 복사 붙여넣기 해주고 중간에 -md- -lg- 등 원하는 거 붙이면 끝.

더 좋은 방법이 있을지 모르겠으나 나는 이렇게 했다.