[SCSS] SCSS 문법 정리

Sass (Synthetically Awesome StyleSheetes)

Sass는 CSS전처리기로 변수, 상소그 혼합, 중첩 등의 다양한 기능을 제공합니다.

CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램

 

SCSS 

SCSS는 Sass 3 버전부터 새롭게 등장하였다.

Sass의 모든 기능을 지원하는 Superset으로, CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어 편리합니다.

 

Sass와 SCSS의 차이점

• Sass: 중괄호가 아닌 들여쓰기를 사용한다.
• SCSS: CSS처럼 {} 와 ; 을 사용한다.

 

1. SCSS의 자료형

Sass, SCSS는 다음 아래와 같은 자료형들을 지원하며, 속성값으로 사용할 수 있다.

자료형	설명
Numbers	숫자 타입
Strings	문자열 타입
Nulls	null 값을 넣을 수 있다. null 값을 속성값으로 사용하면 해당 코드를 컴파일하지 않는다.
Boolean	논리형 타입
Color	색상 표기를 위한 타입 이름표기, 16진수, rgb(rgba)방식을 사용한다.
Lists	값의 목록들을 나타낼 수 있는 타입
Maps	키: 값 쌍의 값의 집합 타입

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
	l: light,
	d: dark,
);

 

 

2.  Nesting (중첩)

Nesting을 통해 상위 선택자의 반복을 줄일 수 있다.

복잡한 구조를 더 편리하게 개선할 수 있다.

 

/* SCSS */
.outer-container {
	width: 200px;
	height: 200px
    
    .inner-container {
    	width: 100px;
        height: 100px;
    }
}


/* Compile to CSS */
.outer-container {
	width: 200px;
	height: 200px;
}

.outer-container .inner-container {
	width: 100px;
	height: 100px;
}

 

3. & (상위 선택자 참조)

중첩 내부에서 & 키워드는 상위(부모)선택자로 치환된다.

/* SCSS */
.container {
	width: 100px;
    
    &.box {
    	width: 50px;
        color: blue;
    }
}

/* Compile to CSS */
.container {
	width: 100px;
}

.container .box {
	width: 50px;
	color: blue;
}

 

4. Variables (변수)

반복적으로 사용되는 값을 변수로 지정할 수 있다.

변수 선언 방법은 변수이름 앞에 $ 를 붙이면 된다.

/* SCSS */
$primary: #010101;
$profile-images: "/assetes/images/";
$icon-width: 24px;
$icon-height: 24px;

.icon {
	width: $icon-width;
	height: $icon-height;
    background: $primary;
}


/* Compile to CSS */
.icon {
	width: 24px;
	height: 24px;
    background: #010101;
}

 

5. #{}

#{}는 리터럴처럼 변수 값을 넣을 수 있게 해준다.

/* SCSS */
$profile: "profile.png";
@import url("/assets/images/#{$profile}");

/* Compile to CSS */
@import url("/assets/images/profile.png");

 

6. 연산자

레이아웃을 디테일하게 디자인할 때 유용하게 사용할 수 있다.

+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자
/	나누기	오룬쪽 값이 반드시 숫자
%	나머지

 

 

7. Mixin

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다.

@mixin을 통해 스타일을 선언한다. 

@include를 통해 사용한다.

 

/* @mixin 선언 */

@mixin large {
	font: {
    	size: 2rem;
        weight: bold;
    }
    color: red;
}

/* @include 사용 */
h1 {
	@include large
}

 

8. 함수

함수를 정의하여 사용할 수 있다.

Mixin과의 차이점은 반환 값이 다르다는 것이다.

Mixin은 지정한 스타일을 반환하고, 함수는 계산된 특정 값을 반환한다.

 

@function column($number: 1, $columns: 12) {
	@return $max-width * ($number / $columns);
}

.box-container {
	width: $max-width;
    
    .box1 {
    	width: columns(); // 1
    }

    .box2 {
        width: columns(8);
    }
}

 

 

9. 조건문

if(조건문, 참, 거짓);

조건문이 참인 경우 참값을, 거짓인 경우 거짓 값을 할당

$width: 500px;

div {
	width: if($width > 300px, $width, null);
}

 

 

10. @if, @else, @else if

조건에 따른 분기 처리 가능

$color: yellow;

div {
    @if $color == red {
    	color: #adadad;
    } @else if $color == orange {
    	color: #bdbdbd;
    } @else {
    	color: #ababab;
    }
}

 

11. 반복문 - @for

스타일을 반복적으로 출력

through와 to에 따라서 종료 조건이 달라진다.

• from a throudh b : a부터 b까지 반복(b 포함)
• from a to b : a 부터 b 직전까지 반복

@for $i from 1 through 3 {
	.through:nth-child(#{$i}) {
    	width: 20px * $i;
    }
}

 

 

12. 반복문 - @each

List또는 Map 데이터를 반복할 때 사용하는 반복문

/* List */
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
    	background-image: url('/assets/images/#{$animal}.png');
    }
}

/* Map */
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
	#{$header} {
    	font-size: $size;
    }
}

 

13. 내장함수

SCSS에서는 다양한 내장함수를 지원한다.

Sass: Built-In Modules