Sass(SCSS) - 사용법 정리

 

Sass(SCSS)는 CSS 전처리기로써, sass 또는 scss 파일을 컴파일(전처리)해서 일반적인 css로 변환해 주는 node 모듈입니다.

Sass(SCSS)를 사용하면, nesting, inherit 등의 기능을 활용해 유지보수성을 높이는 데 도움이 될 수 있습니다.

 

Sass(SCSS)에 대한 간략한 설명과 설치 방법은 아래 글을 참조해 주세요.

https://sty110357.tistory.com/61

Sass(SCSS)란? - 설치해보기

 

이제, Sass(SCSS) 사용법을 간략하게 알아보겠습니다.

 

목차

1. 주석
2. 중첩 with SassMeister
3. 상위 선택자 참조
4. 중첩된 속성
5. 변수
6. 산술 연산
7. 재활용(Mixins)
8. 반복문
9. 함수
10. 색상 내장 함수
11. 가져오기
12. 데이터 종류
13. 반복문 @each
14. 재활용 @content
15. 조건문

 

1. 주석

• 기존 CSS의 주석 처리 방법인 /* */ 외에도 // 를 사용할 수 있습니다.
• // 주석은 컴파일을 거치면, CSS 결과물 코드에 포함되지 않습니다.
• /* */ 주석은 컴파일을 거치면, CSS 결과물 코드에 주석으로 포함됩니다.

.container {
  /* span { } */
  // h1 { }
}

 

2. 중첩 with SassMeister

• 하위 요소를 작성할 때, 상위 선택자를 생략할 수 있습니다.
• https://www.sassmeister.com/ 에서 SCSS 파일이 CSS 파일로 어떻게 변환되는지 테스트할 수 있습니다.

 

3. 상위 선택자 참조

• & 기호를 사용해 상위 선택자를 참조할 수 있습니다.

 

4. 중첩된 속성

• 콜론(:) 기호를 붙여줌으로써, 중첩된 속성의 이름을 생략할 수 있습니다.
• 괄호 뒤엔 세미콜론(;)을 붙여주어야 합니다.

 

5. 변수

• $ 기호를 붙여서 변수를 선언할 수 있습니다.
• JavaScript의 변수처럼, 전역 변수와 지역 변수로 사용할 수 있습니다.

 

6. 산술 연산

• 사칙 연산 또는 나머지를 계산할 수 있습니다.
• 나누기를 계산할 땐 괄호를 사용하거나, 변수를 사용해야 합니다.

 

7. 재사용(Mixins)

• 자주 사용하는 CSS 속성들을 @mixin으로 정의할 수 있습니다.
• @mixin으로 정의해 놓은 속성을 @include로 불러와서 재사용할 수 있습니다.
• 인수로 값을 받아서 사용할 수도 있습니다.

 

8. 반복문

• @for / from / through 키워드를 사용해 반복문을 사용할 수 있습니다.
• 선택자에는 보간법 #{ }을 사용하고, 값에는 $를 사용할 수 있습니다.

 

9. 함수

• @function과 @return 키워드를 사용해 함수를 만들 수 있습니다.

 

10. 색상 내장 함수

• SCSS의 색상 관련 내장 함수를 사용할 수 있습니다.
• mix(): 두 색상의 혼합 색상을 반환
• lighten(): 색상의 밝기를 퍼센테이지로 더 밝게 설정
• darken(): 색상의 밝기를 퍼센테이지로 더 어둡게 설정
• saturate(): 색상의 채도를 퍼센테이지로 더 밝게 설정
• desaturate(): 색상의 채도를 퍼센테이지로 더 어둡게 설정
• grayscale(): 주어진 색상을 회색 톤으로 변환
• invert(): 주어진 색상을 반전
• rgba(): 주어진 색상의 투명도 설정 가능

 

11. 가져오기

• @import 키워드를 사용해서 다른 scss 파일을 불러올 수 있습니다.

@import "./sub.scss", "/sub2.scss"; // (= @import "./sub", "./sub2")

.container {
    h1 {
        color: red;
    }
}

 

12. 데이터 종류

$number: 10px; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // JavaScript의 배열과 유사
$map: ( // JavaScript의 Object와 유사
    o: orange,
    r: royalblue,
    y: yellow
);

.container {
    width: $number;
    background: nth($list, 1); // list 값 불러오기
    color: map-get($map, "o"); // map 값 불러오기
}

 

13. 반복문 @each

• @each 키워드를 사용해서 list, map의 길이만큼 반복해서 처리할 수 있습니다.

$list: orange, royalblue, yellow; // JavaScript의 배열과 유사
$map: ( // JavaScript의 Object와 유사
    o: orange,
    r: royalblue,
    y: red
);

@each $c in $list {
    .container {
        h1 {
            color: $c;
        }
    }
}

@each $k, $v in $map {
    .container {
        h1-#{$k} {
            color: $v;
        }
    }
}

 

14. 재활용 @content

• @content 키워드를 사용해, @mixin의 내용을 확장시킬 수 있습니다.

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}

.container {
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

 

15. 조건문

• @if, @else if, @else 키워드를 사용해, 조건문을 만들 수 있습니다.

@mixin align($align: center) {
    display: flex;
    align-items: center;

    @if $align == left {
        justify-content: start;
    }
    @else if $align == right {
        justify-content: end;
    }
    @else {
        justify-content: center;
    }
}

.container {
    @include align("right");
}