Syntactically awesome stylesheet (어썸한 문법 스타일시트)
평소 코드펜이나 다른 프로젝트 코드를 봤을 때 많은 스타일링 파일이 scss로 작성되어있는 것을 많이 봤어서 궁금증을 해결하기 위해 정리합니다.
CSS Preprocessor (css 전처리기기)란?
CSS 문서 작성을 하다 보면 많은 코드가 중복이 되고 양이 많아지게 되고 유지 보수에 영향을 주게 되는데 (Color 값 찾기, 클래스 상속, Tag 닫기 등)
이런 CSS의 문제점들을 일반적인 프로그래밍 개념을 사용하여 (변수, 함수, 상속 등) 해결해 주는 것이 css 전처리기기가 하는 일이다.
대표적으로 Sass, Less, Stylus 가 있으며 가장 사용률이 많은 sass를 선택했습니다.
설치
프로젝트에 sass 설치
yarn add node-sass
sass / scss 두 개의 문법을 제공하는데 scss가 css와 문법을 비슷하게 만들어서 sass보다 사용하기 편하다고 합니다.
Live Sass Compiler 설치
CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하기 때문에 Sass 파일을 Css 파일로 자동 변환을 시켜주는 확장 프로그램인 Live Sass Compiler 를 VSC에서 다운로드합니다.
작성한 sass 파일에서 watch my Sass 클릭! 실시간 자동 컴파일이 시작됩니다.
SCSS 기능
모듈화
부모의 중괄호 안에 자식 요소에 대한 스타일을 지정하는 형태로 CSS 선택자를 중첩 할 수 있습니다.
아래 button이 nav의 안에 존재하는 것으로 자동 인식해줍니다.
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
color: white;
button {
background: $dark-blue;
}
}Variables
$ 기호를 사용하여 변수를 정의할 수 있다.
반복적으로 많이 사용되는 부분을 변수로 지정해 사용한다.
자주 사용하는 컬러의 경우 변수에 저장해 사용하니 컬러 지정하는데 훨씬 간편하고 코드도 깔끔해졌다.
// 생성
$blue: #228be6;
$gray: #495057;
$pink: #fa8bb2;
// 사용
color: $blue;Mixins
Sass에는 Mixin이라는 함수 기능이 내장되어있다.
많은 선택자에 공통으로 사용되는 코드인 경우 @mixin을 사용하면 함수 형태로 만들어 재활용이 가능해 유지 보수에도 편리하고 훨씬 코드가 깔끔해져서 자주 사용할 것 같다. 사용할 때는 @include를 사용한다.
//생성
@mixin button-color($color) {
background: $color;
&:hover {
background: lighten($color, 10%);
}
&:active {
background: darken($color, 10%);
}
&.outline {
color: $color;
background: none;
border: 1px solid $color;
&:hover {
background: $color;
color: white;
}
}
}
// 사용
&.blue {
@include button-color($blue);
}mixin 기능을 활용해서 아래와 같이 미디어 쿼리를 작성할 수 있고 @content 안에 @include 키워드를 사용한 블록 내부의 코드가 들어가게 된다.
@mixin desktop {
@media (min-width: 900px) {
@content;
}
}
.box {
@include border-radius(10px);
@include desktop {
color: red;
}
}import
파일을 부분화 시켜서 다른 scss 파일을 불러와 사용합니다.
@import ‘SCSS파일명’;Nesting
Sass는 CSS Selector를 Nesting할 수 있는 기능을 지원한다.
중첩의 횟수에는 제한이 없다. 그러나 Nesting을 많이 할수록 컴파일링된 CSS 코드는 복잡해지므로 성능에 문제가 발생한다. 따라서 꼭 필요할 때에만 사용하는 것이 좋다.
위와 같은 이유로, Nesting 구문을 그대로 사용하기보다 BEM 방법론을 사용하는 것이 좋은데, 최근 들어 Sass에서 BEM 방법론에 따른 코드를 편하게 작성할 수 있는 기능이 추가되었다.
.main {
&:hover {
color: red;
}
&__profile-photo {
display: block;
width: 100px;
height: 100px;
&--anonymous {
border: 1px solid silver;
}
}
}정리
작은 프로젝트만 진행해 와서 CSS를 사용하는데 무리가 없었는데,
최근 포트폴리오용으로 만들고 있는 프로젝트들은 규모가 비교적 크다 보니 코드의 양이 많아져 필요한 부분을 찾기 어려워지고 복잡한 부분이 많아 조금 힘든 느낌을 받는 와중에 SCSS를 배우고 전처리기기의 필요성을 알게되서 많은 사람들이 사용하는 이유를 알 것 같다.
