Sass 정리!

타입스크립트로 토이프로젝트를 하기에 앞서서 프로젝트에 Sass를 적용하고자 학습하는 시간을 가졌다.

 

Sass?

Sass만의 문법으로 작성된 Style sheet를 css로 변경해주는 변환 엔진 컴파일러이다. 

Sass 를 쓰는 이유

프로젝트 규모가 커지면 css를 관리하기가 매우 복잡해지는데 Sass를 사용하면  css코드의 중복을 줄이고 유지보수가 용이해진다.

Sass의 확장자

.scss .sass  이렇게 두가지가 있다. 둘의 차이는 간단하다.

1. 중괄호와 세미콜론의 유무
2. Mixins 기능 사용방식이 다르다.

아무래도 나는 중괄호가 있는 css가 익숙하니 scss로 학습해야겠다.

 

사용하기

npm i install node-sass로 설치해서 사용하는 방법만 알고 있었는데 vscode에서 익스텐션으로 제공해주고 있었다,,

설치한 뒤에 scss 코드를 작성하고 아래쪽에 Watch Sass를 클릭하면 알아서 css 파일로 변환 된다.

Watch Sass가 활성화되면 Sass의 코드 변경을 감지해서 바로바로 css로 컴파일해준다.

색상을 red 로 변경했더니 즉시 변경사항이 브라우저에 반영되었다.

 

Sass 특징

1. 계층구조

css에서는 부모 선택자를 계속해서 선언해야하는게 좀 귀찮았는데 scss에서는 계층구조를 지원해주다보니 개발이 좀 더 편리하다. 태그 뿐 아니라 속성에 대해서도 중첩이 가능하다.

background 속성에 대해서 중첩으로 각 속성값을 넣어줄 경우에 변환된 css파일의 background 값은

이렇게 잘 들어가는 것을 확인할 수 있었다.

 

2. & 선택자

&를 쓰면 현재 태그를 가리킨다.

그래서 &-anyWord 라고 했을때 css로 컴파일된 결과를 보면

&이 .box 란 문자로 그대로 변환되는 것을 확인할 수 있다. 마찬가지로 hover 등의 효과도 & 연산자로 주면 된다. 

 

3. 변수 선언기능

css하면서 변수는 없나... 했는데 scss에서 변수를 제공해준다. 변수가 있음으로 인해서 유지보수가 매우 쉬워진다.

$기호를 사용해서 변수를 선언하고 참조한다.

scss의 변수에는 리스트, 딕셔너리도 있다.  사용방법은 아래와 같다. 리스트의 시작 인덱스가 1이라는 것에 주의!

 

Sass의 변수들은 블록스코프를 따른다. 위 예시에서 선언한 변수는 전역변수이다.

// 지역 변수를 전역변수로 선언하고 싶다면
$val: 23 !global;

 

4. scss 파일 관리

scss 파일은 파일이름 맨 앞에 언더바 _ 를 붙이게 되면 컴파일 대상에서 제외시킨다. 그러므로 변수들은 _ 를 붙인 파일에 선언해두고 해당 파일을 필요한 곳에서 import 해서 사용하면 된다.

 

5. 연산

= == != + - * % 등의 연산이 가능하다.

 

6. Mixin

Mixin 기능은 쉽게 말해서 반복되는 코드를 중괄호로 묶고 이름을 붙여서 재사용하는 것이다.

한가지 재밌는 점은 변수를 넘겨줄 수도 있다. js나 파이썬에서 처럼 default 값을 넣어줄 수도 있다.

 

3. 한줄 주석 가능

 

 

 

 

 

소재목3

본문3

 

마무리

마무리 글

 

관련글

관련글 링크