쉽게 배우는 Sass 기초 1편 : 셋팅

 

 

 

CSS라는 언어는 매우 원시적인 언어입니다.

그냥 저거 h4태그의 색깔이 어쩌고 저쩌고하는 스타일만 넣는 언어니까요.

그런데 CSS가 몇천줄이 넘어가기 시작한다면 CSS 관리 자체로도 큰 부담이 됩니다.

 

그래서 착한 사람들이 이런 상황에서 여러가지 문제들을 해결할 수 있는 Preprocessor (전처리언어) 라는걸 만들어냈습니다.

그 중 하나인 Sass는 CSS를 조금 더 프로그래밍 언어스럽게 작성할 수 있는 문법들을 제공합니다.

프로그래밍스러운 변수, 함수, import, 상속 등의 기능을 CSS에서 이용가능한데

굳이 안써도 됩니다만 배우고나면 몇천줄의 CSS작성도 끄떡없는 CSS 파이터로 전직하실 수 있습니다. 

 

 

 

 

 

SASS 라는 전처리 언어 쓰려면 일단 개발환경 셋팅부터

 

왜냐면 웹브라우저는 CSS 파일밖에 모릅니다. SASS 이런거 모름 

그래서 SASS 로 코드를 짰으면 그걸 CSS 파일로 변환해주는 변환기를 돌려서

변환된 CSS 파일을 HTML 파일과 쓰셔야합니다. 

 

변환하려면 node.js 설치하고 터미널 켜서 npm init인지 install인지 어쩌구라고 나오는데

그것은 배보다 배꼽이 더 크기 때문에

우리같은 컴알못 일반인들은 VScode 에디터의 힘을 빌리는게 좋습니다.

 

 

 

 

 

 

SASS 문법 1 : 값을 저장해놓고 쓰는 '변수' 

 

프로그래밍 배울 때 시험대비하듯 문법만 쭉 가르치는 나쁜 놈들이 있는데

그렇게 배우면 혼자 응용을 못합니다.

그럼 안되니 이걸 배우면 뭐가 좋은지 어디다 쓸지부터 설명해드리겠습니다.

 

 

CSS로 색상 지정할 때 #2a4c6e 이런 이상한 칼라코드를 사용합니다.

외우기 힘들지 않습니까. 복붙하려해도 귀찮습니다.

SASS 파일에선 이런 어려운 값들을 예쁜 한글로 치환해서 사용할 수 있습니다.

변수라는 문법을 쓰면 되는데 변수 문법은 어려운 값들을 이쁜 단어에 저장해서 쓸 수 있게 도와주는 문법입니다. 

 

(test.scss)
$메인색상 : #2a4c6e;
$서브색상 : #333333;

.text {
  color: $메인색상
}
.box {
  background: $서브색상
} 

 

 

1. 우선 SASS 쓰려면 test.scss 파일 만들고 거기에 적어보십시오. SASS 파일은 항상 파일 확장자가 .scss로 끝나면 됩니다.

2. $기호를 사용하신 후 이쁜 이름을 작명하고, 거기에 저장할 더러운 값을 오른쪽에 적으시면

이제 $이쁜이름을 쓸 때마다 더러운 값이 그 자리에 남습니다.

 

위에선 #2a4c6e 라는 더러운 값을 $메인색상으로 저장했습니다. 

그럼 이제 #2a4c6e 이 색이 필요할 때 마다 귀찮게 #부터 적는게 아니라

$메인색상 이라고 깔끔하게 적을 수 있습니다.

훨씬 기억하기 쉽습니다. 

 

 

이것이 Sass에서의 변수 문법입니다.

- 이거 말고도 width, font-size 등 자주 쓰지만 기억하기 어려운 값들을 넣으면 매우 편리합니다.

- $변수이름은 영어도 좋고 한글도 잘 먹습니다. 

- 많은 곳에서 공통적으로 사용하는 값들도 저기 넣으면 좋습니다. 

 

▲ 왜냐면 나중에 변경이 쉬워지니까요. 

예를 들어서 지금 온갖 곳에 적용중인 사이트 메인 색을 #2a4c6e -> #444444 이렇게 변경해야한다고 칩시다.

대충 색상코드만 붙여넣기식으로 개발했다면 이 색을 전부 일일이 찾아서 바꿔야겠죠?

하지만 변수로 집어넣으셨으면 변수정의만 $메인색상 : #444444; 살짝 바꿔버리면 다른 곳도 바뀝니다. 

나중에 수정과 관리가 쉬워지겠군요.

 

 

 

 

사칙연산도 바로바로 가능합니다.

 

(test.scss)

$기본사이즈 : 16px;

.box {
  font-size : $기본사이즈 + 2px;
  width : (100px * 2);
  height : (300px / 3)
}

그럼 진짜로 연산해줍니다. 

덧셈뺄셈은 px 단위는 px 단위끼리, % 단위는 % 단위끼리 이렇게 단위 맞춰주셔야하고

곱셈 나눗셈은 보통 뒤에 단위를 쓰지 않습니다. 쓰면 이상한 자료형이 됩니다. 

곱셈 나눗셈은 괄호 안에 작성해야 잘 먹습니다. 

 

파일 저장해보시면 CSS로 자동변환해준 파일에서 그 결과를 확인할 수 있을겁니다.

 

 

 

(참고1) SASS없이 그냥 CSS 파일에도 var() 이걸 이용해서 변수문법을 사용가능합니다. 

(참고2) 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙연산을 사용가능합니다.