사실 SCSS 적용 방법에 대해 유튜브를 찾아보기도 하고 강의를 찾아보기도 했지만, 내가 자료를 잘 못찾았던 것인지 마음과는 다르게 쉽게 숙지하지 못했던 스킬 중 하나였다.
고로 이번 마크업 디벨로퍼 과정 수업을 들었던 것이 나의 기술적 역량을 끌어올리는데 큰 몫을 한 것 같다.
주저리주저리 자기 반성은 여기까지 하고, 야무지게 배워온 SCSS의 정석을 잘 메모해보겠다.
🩵 SCSS란?
🩵 Sass의 한 문법 형식으로, 기존 CSS의 단점을 보완한 CSS 전처리기이다.
🩵 CSS 문법을 그대로 사용할 수 있으면서도, 변수, 중첩(Nesting), Mixin 등의 강력한 기능을 제공해 유지보수성과 생산성을 높여준다는 장점이 있다.
🩵 SCSS 장점 한 눈에 보기
1. 변수 사용 가능
🩵 동일한 색상이나 값을 반복적으로 사용할 때, 변수를 활용할 수 있다.
🔹 $primary-color: #3498db; 처럼 $변수명에 값을 할당
🔹 특정 요소에 background-color: $primary-color; 처럼 변수를 불러와 설정해준다.
🔹 변수 하나만 변경하면 공통 스타일을 쉽게 수정할 수 있다는 장점!
2. 중첩(Nesting) 문법 지원
🩵 CSS 선택자를 계층 구조 그대로 중첩해서 작성 가능해 가독성이 좋아지는 장점이 있다!
🔹 CSS 구조를 한눈에 파악하기 쉬워지고, 스타일을 그룹화할 수 있다.
🔹 가상요소(before, after), hover 등 선택자는 &를 붙여서 사용한다.
<style>
.navbar {
background: #333;
.menu {
display: flex;
li {
list-style: none;
a {
color: white;
text-decoration: none;
}
}
}
}
</style>이렇게 작성 후, 컴파일 하면 아래처럼 변환된다.
<style>
.navbar {
background: #333;
}
.navbar .menu {
display: flex;
}
.navbar .menu li {
list-style: none;
}
.navbar .menu li a {
color: white;
text-decoration: none;
}
</style>3. 재사용 가능한 Mixin 기능
🩵 반복되는 스타일을 한 번만 정의하고 여러 곳에서 재사용할 수 있다.
🔹 @mixin 스타일 이름 {} 처럼 정의하고, 요소의 style에서 @include 스타일 이름 처럼 불러와서 여러 곳에서 편하게 재사용할 수 있다.
🔹 반응형 작업할 때, 아주 편하다.
<style>
/* 일반 스타일 */
/* _mixin.scss 파일에서 정리해주면 더욱 좋다. */
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
height: 100vh;
}
/* 반응형 스타일 */
@mixin mobile-l{
@media (max-width:767px){
@content;
}
}
#cursor {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 100;
@include mobile-l {
display: none;
}
}
</style>4. 모듈화(import, use)로 코드 관리
🩵 CSS는 모든 스타일을 하나의 파일에 작성해야 하지만, SCSS는 여러 개의 파일로 분리하여 관리할 수 있다. 아래 SCSS 기본 사용법을 참고하자.
5. 연산(Operators) 기능 지원
🩵 SCSS에서는 +, -, *, / 등의 연산을 지원한다.
🩵 SCSS 기본 사용법 (국룰은 아님..)
🩵 scss라는 디렉토리 생성 -> base / layout / pages / utils 라는 디렉토리를 생성하여 각 성격을 가지는 파일들을 관리해줄 것이다.
🔹 base : reset이나 common, typo(font) 관련 style을 설정해줄 .scss파일을 생성/관리
🔹 layout : header,footer style을 설정해줄 .scss파일을 생성/관리
🔹 pages : 메인, 서브페이지의 style을 설정해줄 .scss파일을 생성/관리
🔹 utils : var(css 변수), 반응형(mixin) 등을 정의해줄 .scss 파일을 생성/관리
🩵 아래 이미지처럼 _파일명.scss 처럼 앞에 언더스코어를 붙여줘야한다.
🔹 왜냐하면 위처럼 생성해준 파일은 다른 SCSS 파일에서 @import나 @use를 통해 불러와서 사용되는 파일이기 때문에 컴파일할 때 단독 CSS 파일로 변환하지 않는다. 즉, _reset.scss 같은 파일을 만들고 main.scss에서 가져다 쓰면, _reset.scss 자체는 변환되지 않고 main.css에 포함된다. = 필요할 때만 불러와서 사용 가능!
🔹 만약 buttons.scss처럼 언더스코어없이 만들면, SCSS는 이를 독립적인 SCSS 파일로 인식하고, CSS로 변환할 때 buttons.css 파일을 별도로 생성한다.
🩵 scss 디렉토리 하위에 style.scss라는 파일을 생성한다.
🔹 이 파일은 언더스코어가 없으니 css파일로 변환이 된다!
🩵 생성된 style.scss에서 필요한 scss 파일을 import 해준다.
🔹 이때 파일 확장자(.scss)는 안써도 무방하다.
🩵 그리고 Live Sass Compiler 라는 확장기능을 설치한다.
🔹 톱니바퀴 클릭 -> 설정 -> Autoprefix 편집
🔹 "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"] 추가 (크로스 브라우징 처리를 해주는 코드)
🔹 톱니바퀴 클릭 -> 설정 -> Formats 편집
🔹 "savePath": "~/../css/", 경로를 왼쪽과 동일하게 편집 (css파일로 변환된 것을 왼쪽 경로에 저장됨)
🔹 톱니바퀴 클릭 -> 설정 -> Generate Map 편집
🔹 false이면 true로 변경하기 (SCSS는 컴파일 후 CSS로 변환되지만, 이 과정에서 원본 SCSS 파일의 구조를 잃게 된다. source map은 컴파일된 CSS 파일과 원본 SCSS 파일의 매핑 정보를 포함하는 파일로, 개발자가 크롬 개발자 도구(DevTools)에서 스타일을 디버깅할 때 원본 SCSS 파일을 그대로 볼 수 있도록 도와준다.)
🔹 즉, SCSS 원본을 유지하면서 CSS를 확인할 수 있어 디버깅이 훨씬 쉬워진다.
✅ 특히 여러 개의 SCSS 파일을 모듈화해서 관리할 때 필수적
✅ 프로덕션 환경에서는 성능 최적화를 위해 비활성화할 수도 있음
👉 개발할 때는 true로 설정하고, 배포 시에는 false로 설정하는 것이 일반적인 방법이라고 한다.
🩵 설정이 끝나면 style.scss 파일로 돌아와서 하단의 Watch Sass를 클릭한다. 그리고 저장을 하면 css 디렉토리에 style.css라는 변환 파일이 생성된다.
