SASS/SCSS 입문: CSS 프리프로세서 사용하기
웹 개발에서 CSS는 스타일링의 핵심 요소이지만, 대규모 프로젝트에서 CSS만으로는 유지보수와 확장성에 한계가 있을 수 있습니다. SASS (Syntactically Awesome Style Sheets)는 CSS의 모든 기능을 지원하면서 추가적인 기능을 제공하는 CSS의 확장 버전으로, 스타일 시트를 더욱 동적이고 효율적으로 작성할 수 있도록 돕습니다.
웹 개발에서 CSS는 스타일링의 핵심 요소이지만, 대규모 프로젝트에서 CSS만으로는 유지보수와 확장성에 한계가 있을 수 있습니다. SASS (Syntactically Awesome Style Sheets)는 CSS의 모든 기능을 지원하면서 추가적인 기능을 제공하는 CSS의 확장 버전으로, 스타일 시트를 더욱 동적이고 효율적으로 작성할 수 있도록 돕습니다.
npm install -g node-sass설치 후, SCSS 파일을 CSS로 컴파일하는 방법은 다음과 같습니다.
node-sass input.scss output.css변수 사용 예제
SCSS에서는 CSS 값을 재사용하기 위해 변수를 사용할 수 있습니다. 색상, 폰트 사이즈, 여백 등을 변수로 설정하여 일관성을 유지하고 코드의 가독성을 높일 수 있습니다.
$primary-color: #333;
$font-stack: Helvetica, sans-serif;
$padding: 20px;
body {
font: 100% $font-stack;
color: $primary-color;
padding: $padding;
}믹스인 (Mixins)
믹스인은 그룹화된 스타일을 재사용하기 위한 강력한 기능입니다. 믹스인을 사용하면 반복적인 CSS 코드를 줄이고, 코드의 유지보수를 쉽게 할 수 있습니다.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
height: 100vh;
}중첩 (Nesting)
SCSS에서는 선택자를 중첩하여 더 직관적으로 스타일을 정의할 수 있습니다. 이는 HTML 구조를 명확히 반영하며, 코드의 가독성을 높여줍니다.
.navbar {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}SASS/SCSS의 고급 사용법
함수와 연산
SASS는 CSS에서 직접적으로 지원하지 않는 기능적인 측면을 제공합니다. 수학적 연산, 함수를 사용하여 동적으로 스타일을 관리할 수 있습니다. 이를 통해 디자인의 일관성과 유연성을 향상시킬 수 있습니다.
색상 함수 예제
색상을 조작하는 함수를 사용하여 테마 색상을 쉽게 조절할 수 있습니다.
$base-color: #036;
.button {
background-color: $base-color;
&:hover {
background-color: lighten($base-color, 20%);
}
}이 예제에서 lighten 함수는 버튼 호버 시 기본 색상을 20% 밝게 만듭니다. 비슷하게 darken, saturate 등의 함수도 사용할 수 있어 디자인에 동적 변화를 쉽게 적용할 수 있습니다.
조건문과 반복문
SASS는 조건문과 반복문을 지원하여 스타일 시트의 로직을 풍부하게 할 수 있습니다. 이를 통해 반복적인 작업을 자동화하고, 조건에 따라 다른 스타일을 적용할 수 있습니다.
반복문을 사용한 그리드 레이아웃 생성
@for $i from 1 through 12 {
.col-#{$i} {
width: 100% / 12 * $i;
}
}이 코드는 12개의 컬럼을 가진 그리드 시스템을 생성합니다. 각 컬럼 클래스(.col-1 to .col-12)에는 적절한 너비가 할당됩니다. $i는 1에서 12까지 반복되며, 각 반복마다 컬럼의 너비를 계산하여 적용합니다.
모듈과 파티얼
대규모 프로젝트에서는 스타일 시트를 모듈화하여 관리하는 것이 유리합니다. SASS의 파티얼과 모듈 시스템을 사용하면 코드를 여러 파일로 분리하여 관리할 수 있으며, 필요한 곳에서만 로드하여 사용할 수 있습니다.
파티얼 사용 예제
_variables.scss, _mixins.scss 파일을 생성하고, 이를 메인 스타일 시트에서 임포트합니다.
// _variables.scss
$primary-color: #333;
// _mixins.scss
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// styles.scss
@import 'variables';
@import 'mixins';
body {
color: $primary-color;
@include flex-center;
}이 구조를 사용하면 스타일 시트의 유지 보수가 쉬워지고, 코드의 재사용성이 증가합니다.
결론
SASS/SCSS는 웹 개발에서 스타일링을 위한 강력한 도구입니다. 고급 기능을 통해 개발자는 보다 효율적이고 동적인 방식으로 스타일을 관리할 수 있습니다. 이 강의를 통해 SASS/SCSS의 깊이 있는 기능을 배우고, 실제 프로젝트에 적용하여 보다 전문적인 웹사이트를 구축할 수 있을 것입니다.
댓글