글 제목: SCSS 사용법
SCSS는 CSS의 확장판으로, 더욱 효율적이고 간편한 방법으로 스타일 시트를 작성할 수 있게 해줍니다. SCSS를 사용하는 방법을 알아보겠습니다.
1. SCSS 파일 생성하기
먼저 SCSS 파일을 생성해야 합니다. 확장자는 .scss로 지정합니다. 예를 들어, styles.scss라는 파일을 생성하세요.
2. 변수 사용하기
SCSS를 사용하면 변수를 정의하여 스타일을 지정하는 데 유용하게 활용할 수 있습니다. 변수를 선언하려면 $ 기호를 사용합니다. 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.
scss
$primary-color: #007bff;
$font-size: 16px;
위의 코드에서 primary-color 변수는 #007bff로, font-size 변수는 16px로 지정했습니다.
3. 중첩된 스타일 지정하기
SCSS를 사용하면 중첩 구조로 스타일을 정의할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있습니다. 예를 들어, 다음과 같이 중첩된 구조로 스타일을 지정할 수 있습니다.
“`scss
.container {
width: 100%;
.title {
font-size: $font-size;
color: $primary-color;
}
}
“`
위의 코드에서 .container는 .title 내부의 스타일을 포함하는 부모 요소입니다. 이를 통해 .title의 스타일을 더 간단하게 지정할 수 있습니다.
4. 믹스인 사용하기
믹스인은 재사용 가능한 스타일의 집합으로, 함수처럼 작동합니다. 믹스인을 사용하면 코드를 반복하지 않고도 스타일을 쉽게 적용할 수 있습니다. 예를 들어, 다음과 같이 믹스인을 정의하고 사용할 수 있습니다.
“`scss
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
height: 200px;
@include center;
}
“`
위의 코드에서 center 믹스인은 display: flex;, justify-content: center;, align-items: center; 스타일을 적용합니다. @include를 사용하여 center 믹스인을 .container에 적용했습니다.
5. SCSS 파일 컴파일하기
SCSS 파일은 브라우저에서 직접 사용할 수 없으므로 SCSS 파일을 CSS 파일로 컴파일해야 합니다. 컴파일 도구로는 node-sass, sass, gulp-sass 등이 있습니다. 예를 들어, node-sass를 사용하여 컴파일하려면 다음 명령어를 사용합니다.
bash
node-sass styles.scss styles.css
위의 명령어는 styles.scss 파일을 컴파일하여 styles.css 파일로 저장합니다.
이제 SCSS의 기본 사용법에 대해 알아보았습니다. SCSS는 복잡한 스타일 시트 작업을 간소화하고 개발자들에게 편의성을 제공합니다.