Back
Featured image of post [Sass] Sass 설치 및 기본 문법 소개
Style

[Sass] Sass 설치 및 기본 문법 소개

Sass를 사용하는 이유와 개발 환경 구축하기

Sass를 사용해야 할 이유

CSS만 주구장창 사용하다가 한달동안 Sass를 스터디하였는데 직접 사용해보니 왜 Sass를 사용하면 좋은지 정리를 해보았다.

1. 규모가 크고 복잡한 웹 어플리케이션에서의 효율적인 구조화
Sass에서 제공하는 여러 내장 함수 및 믹스인, 함수를 사용해 공통 스타일 작성에 더욱 효율적이다.

2. 프로그래밍 언어 처럼 변수, 조건문, 반복문 활용을 통해 중복되지 않은 공통 컴포넌트 작성
CSS에서도 중복되는 값들은 root요소에 변수를 선언해서 사용하였지만, Sass 환경에서는 코드 블록 범위 내에서 자유로운 변수 선언이 가능하며 조건문, 반복문을 지원해 반복적인 코드 사용이 줄어들고 논리적으로 스타일 구조를 작성할 수 있다.

3. 중첩 코드블록(Nesting) 사용으로 계층적인 스타일링 편이
스타일링에서 부모 자식 관계 파악이 쉽고 반복적으로 부모 요소를 작성하지 않아도 된다.

Sass와 SCSS의 차이 😕

실제 Sass 개발을 시작하면 파일 확장자는 .scss로 생성해 개발을 진행하는 자신을 볼 수 있다. SCSS는 Sass와 무슨 관계가 있을까?

먼저 초기에는 .sass 자체 확장자 파일을 지원하였으나 기존 css 방식과는 형태가 많이 달랐다.
추후에 sass 문법 장점과 친숙한 css 코드 스타일이 합쳐진 SCSS가 등장했다고 이해하면 된다.

Sass 개발환경 구성하기

Sass는 전처리기로써 웹 브라우저에서 scss 파일 자체를 읽지는 못한다.
따라서 작성 시에 컴파일을 매번 해주어야 하는데, npm script에 옵션 설정을 해주면 watch기능이 있어 파일이 바뀔 때마다 자동으로 컴파일해준다.

  1. 패키지 모듈 설치

    npm i node-sass

  2. 스크립트 커맨드 추가

        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "node-sass": "node-sass",
            "sass": "node-sass -w -r ./styles/main.scss ./main.css"

    }

  • watch : 파일이 변경되는 시점을 감시해 자동으로 컴파일 해주는 옵션 (-w, —watch)

  • recursive : 변경되는 파일의 관련된 모든 파일의 변화를 감시해주는 옵션 (-r, —recursive)

  • -source-map : 디버깅에서 scss 파일 위치를 추적해주는 옵션

        npm run sass ##sass -> css compile
  1. linter 설정 
    npm i -D sass-lint

기본 문법

디버깅

@debug 명령어를 통해 디버깅을 할 수 있다.

자료형

sass에서는 9개의 자료형을 사용할 수 있으며 type-of로 타입 체크도 쉽게 할 수 있다.

$font-weights: (
    'regular': 400,
    'medium': 500,
    'bold': 700
);

@function foo($x) {
    @return $x;
}

@mixin syntax-colors($args...) {
    @debug type-of($args); //arglist
}

@debug type-of(10px); // number
@debug type-of('#8c8c8c'); // string
@debug type-of(#8c8c8c); // color
@debug type-of(true); // bool
@debug type-of(null); // null
@debug type-of(10px 20px 30px); // list
@debug type-of($font-weights); // map
@debug type-of(get-function(foo)); // function

@include syntax-colors($string: #080, $comment: #800);

사용할 수 있는 타입 목록

  • number
  • string
  • color
  • bool
  • null
  • list
  • map
  • function
  • arglist

변수

css에서 사용하는 여러 속성 값들을 변수로 지정할 수 있다. $ 예약어를 사용한다.

  • 영문자, 대시(-), 언더바(_), 숫자를 사용할 수 있다.
  • 숫자로 변수명을 시작할 수 없다.
  • 대소문자를 구분한다.
$width: 1;
$image-url : url('./assets/images/logo.svg);

p {
    width: $width;
}

div {
		background-image: $image-url;
}

조건문

@if, @if~@else로 조건문을 작성한다. 조건문 내부에서 OR 연산자 또는 AND 연산자를 사용할 수 있다.

$color: #ededed;
$position: fixed;

//기본 @if 지시문
p {
    @if (type-of($color) == color) {
        color: $color;
    }
}

//if ~ else
.section {
    @if ($position == fixed or $position == absolute) {
        position: $position;
    } @else {
        position: relative;
    }
}

//if ~ else if ~ else
@if (condition1) {
    //..style
} @else if(condition2) {
    //..style
} @else {
    //..style
}

반복문

@for 를 사용해 반복문을 작성한다. 선언할 때 내장 변수를 같이 선언하는데, 반복문 내에서 사용할 변수이다.

@for $item for 1 through 4 {
    //loop code
}

반복문 내에서 변수를 쓰려면 #{$variable}형태로 사용하면된다.

$sm-cols: 4; //grid 컬럼 갯수
@for $item from 1 through 4 {
    .col-sm-#{$item} {
        width: $item / $sm-cols * 100%;
    }
}

/* 컴파일 결과 */
.container .col-sm-1 {
    width: 25%;
}
.container .col-sm-2 {
    width: 50%;
}
.container .col-sm-3 {
    width: 75%;
}
.container .col-sm-4 {
    width: 100%;
}

Map

sass에서 제공하는 map은 자바스크립트에서의 객체 자료형 처럼 key-value로 이루어진 자료형이다.

//font-style Map 정의
$font-style: (
    sm: 12px,
    md: 16px,
    lg: 18px
);

map-get
해당 key에 맞는 value를 가져온다.

p {
    font-size: map-get($font-style, sm); //12px;
}

map-has-key
정의된 map 내부에 해당 key가 존재하는지 확인한다.

@function get-font-size($size) {
    @if (map-has-key($font-style, $size)) {
        @return map-get($font-style, $size);
    } @else {
        @return 10px;
    }
}

p {
    font-size: get-font-size(xl); //10px
}

.lg-font {
    font-size: get-font-size(lg); //18px
}

참고 자료

© 2020 - 2023 Jiny