SASS의 기본
이 글에서는 SASS의 기본을 설명합니다.
SASS의 기본 기능을 단계별로 설명하고 실제 샘플 코드를 통해 사용 방법을 보여드리겠습니다.
YouTube Video
SASS의 기본
SASS(Syntactically Awesome Stylesheets)는 CSS를 확장한 스타일시트 언어입니다. SASS를 사용하면 CSS에서는 사용할 수 없는 변수, 중첩, 믹스인, 상속과 같은 고급 기능을 활용할 수 있습니다. 이로 인해 스타일시트 관리와 재사용이 훨씬 쉬워집니다.
SASS란 무엇인가?
SASS는 CSS 작성을 간단하게 하면서 더욱 유연하고 강력한 스타일링을 가능하게 하는 언어입니다. SASS는 표준 CSS 문법과 유사한 SCSS(Sassy CSS) 문법도 제공합니다. 예시는 다음과 같습니다:.
SCSS 예시
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS 예시
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASS 설정하기
설치 방법
SASS를 사용하려면 먼저 Node.js를 설치한 후 다음 명령어로 SASS를 설치하세요:.
1npm install -g sass컴파일 방법
SASS 파일(.scss 또는 .sass)을 CSS로 컴파일하려면 다음 명령어를 사용하세요:.
1sass input.scss output.csswatch 옵션을 사용하여 파일 변경을 모니터링하고 실시간으로 컴파일할 수도 있습니다.
변수
SASS에서는 색상이나 폰트 크기와 같은 값을 변수로 설정해 재사용할 수 있습니다.
샘플 코드
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- 이 코드는 SASS 변수로 색상과 폰트를 정의하고
body선택자 내에서 재사용하여 일관성과 유지보수성을 높입니다.
컴파일 결과
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}중첩
SASS는 CSS 선택자를 중첩해 코드의 가독성을 높일 수 있습니다.
샘플 코드
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- 이 코드는 중첩 계층 구조를 사용하여 스타일 구조를 시각적으로 명확히 합니다.
컴파일 결과
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}믹스인
믹스인을 사용하면 여러 선택자에서 동일한 코드를 재사용할 수 있습니다.
샘플 코드
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- 이 코드는
@mixin을 사용해border-radius스타일을 정의하고,@include로button과.card에 재사용하여 중복 없이 효율적인 스타일링을 가능하게 합니다.
컴파일 결과
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}상속(@extend)
상속을 통해 기존 스타일을 다른 선택자에 적용할 수 있습니다.
샘플 코드
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- 이 코드는 플레이스홀더 선택자인
%button-style을 정의하고@extend를 사용하여 공통 스타일을button과.link-button모두에 적용하여 재사용성과 일관성을 높입니다.
컴파일 결과
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}조건문과 반복문
SASS는 조건문과 반복문을 지원하여 동적으로 스타일을 생성할 수 있습니다.
조건문 예시
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- 이 코드는 SASS의
if함수를 사용하여$theme값에 따라 배경색과 글자 색을 전환하여 조건문으로 동적인 스타일 생성을 가능하게 합니다.
반복문 예시
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- 이 코드는 SASS의
@for반복문을 사용하여.column-1부터.column-3까지의 클래스를 동적으로 생성합니다.
컴파일 결과
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}파일 분할 및 가져오기
SASS에서는 @use 또는 @import를 통해 파일을 분할해 재사용할 수 있습니다.
파일 구조
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}컴파일 결과
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}요약
SASS를 사용하면 CSS 작성이 효율적이고, 코드의 재사용성과 유지보수성이 향상됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.