CSS-4) SCSS 기초 정리
۰ SCSS는 CSS보다 심플한 표기법으로 CSS를 구조화 해서 표현할 수 있다. SCSS 사용법은 중괄호로 중첩을 표현하고, 세미콜론으로 속성을 구분한다. 반면, CSS는 중괄호와 세미콜론을 모두 사용한다. 이는 CSS 보다 SCSS가 가독성이 높아지고, 유지보수성이 높아지는 이유이다.
 |
| [CSS 작성 예시] |
 |
| [SCSS 작성 예시] |
۰ 위의 사진처럼 작성하기 때문에 SCSS에서는 가독성이 높아지고, 유지보수성이 더 높아진다. 하지만 브라우저는 scss를 읽을 수 없기 때문에 scss를 사용할 때, scss와 css를 연결한 후 css를 html 파일과 연결해야 한다. 연동하는 방법으로는 Sass와 Live Sass Compiler 확장 프로그램을 설치하면 된다.
۰ scss에서 파일을 만들어 사용할 때, 파일명 앞에 _ (언더바)를 입력하면, 해당 파일은 css로 변경하고 싶지 않다는 표시이다. 오직 scss로 사용하기 위한 파일을 만들 때 사용한다.
[Variables]
۰ 위에서 말한 방식으로 _value.scss 파일을 만들었다면, 우리가 css와 연동해서 사용 중인 scss 파일에 해당 파일을 import 해준다.
-> @import "_value";
۰ _value.scss 파일은 우리가 사용할 속성들을 변수로 선언해 뒀다가 해당 변수를 메인으로 사용 중인 style.scss 파일에서 불러서 사용하는 역할이다. 변수를 선언하고 사용하는 방법은 아래와 같다.
-> $bgcolor: aqua; (변수선언)
-> body { backgroundcolor : $bgcolor; } (main scss에서 사용하는 법)
[Nesting]
۰ Nesting은 맨 위에 올려둔 SCSS 작성 예시와 같다. 기존의 CSS는 class 안의 요소들 마다 중괄호를 열어서 사용해야 했다. 하지만 SCSS는 중괄호 안에서 해당 요소들을 중첩 해서 사용할 수 있다.
 |
| [Nesting 작성 예시] |
[Mixins]
۰ Mixins를 사용하기 위해서 _mixins.scss 파일을 하나 만든 후 style.scss 파일에 import 해준다.
-> _mixins.scss 파일로 돌아와서 다음과 같이 작성한다.
@mixin titleName {
background-color : aqua;
color : whitesmoke;
font-size : 40px;
}
-> style.scss 파일로 돌아와서 위의 코드를 활용한다.
h1 {
@include titleName();
}
마치 함수를 설정해 놓고 사용하는 것처럼 사용하는 게 mixin의 사용법이다. mixin을 여러 요소들에 다양하게 사용하기를 원한다면 다음과 같이 사용해야 한다.
-> _mixins.scss 파일 변경
@mixin titleName($color) {
display : block;
text-decoration : none;
color : $color;
}
-> style.scss 파일 변경
h1 {
&:nth-child(odd) {
@include titleName(aqua);
}
&:nth-child(even) {
@include titleName(yellowgreen);
}}
위처럼 작성하면 특정 요소들에게 원하는 속성을 부여할 수가 있게 된다. 또한 SCSS에서는 if 문을 활용하는 것도 가능하다.
-> _mixins.scss 파일 변경
@mixin titleName($word) {
@if $word == "odd" {
color = aqua;
} @else {
color = yellowgreen;
}}
-> style.scss 파일 변경
h1 {
&:nth-child(odd) {
@include titleName("odd");
}
&:nth-child(even) {
@include titleName("even");
}}
SCSS를 사용하려고 환경 설정하는데 많은 시간이 허비된 하루였다. 주변에 가르쳐줄 사람이 딱히 없다 보니, 에러가 나와도 스스로 해결해야만 했다. 이번에 내가 생긴 에러는 교육하는 곳에서 받은 package.json의 모듈들과 node.js의 버전이 맞지 않아서 생긴 에러였다.
v19.4.0이 기존에 설치되어 있었어서 node.js를 따로 설치하지 않고 진행했던 게 내 시간을 많이 잡아 먹게 했다. 왜 version 마다 지원하는 게 다른 건지에 대해서 조사해서 글을 한 번 작성해 봐야겠다. 그러면 다음에 이런 일이 또 생겼을 때, 대처하기가 용이할 것 같다.
"기록은 기억을 이길 수 없다."
이번 주 남은 시간들은 일정이 있어서 과연 얼마나 공부를 할 수 있을지 모르겠다. 그래도 힘내보자!
댓글
댓글 쓰기