[SCSS] 기본 문법(1)

SCSS 정리 참고자료

• 패스트캠퍼스 SCSS 강의
• https://sass-lang.com/guide

📗 SCSS

✏️ SCSS 개념

SCSS는 CSS의 복잡한 코드를 간결하게 작성할 수 있도록 도와주는 CSS 전처리 도구이다. (CSS Preprocessing: 개발환경에서는 SCSS 문법을 활용하여 코드를 작성하고 컴파일시 CSS 파일로 변환됨) 들여쓰기와 중첩문, 변수를 사용할 수 있다.

SCSS는 Sass와 문법이 거의 동일하지만, Sass는 ;(세미콜론)과 {}(중괄호)를 사용하지 않는다.(들여쓰기로 중첩 구분) 문법적 오류로 인해 현재는 SCSS를 주로 사용하는 추세이다.

✏️ 주석

/* 기존 css와 동일한 주석 작성시 컴파일 후에도 그대로 유지됨 */
// javascript에서 사용하는 주석 작성시 컴파일 후 사라짐

✏️ 선택자

// 후손선택자 (생략)
.container {
	.item {
    color: blue;
    }
}

// 자식선택자 '>'
.parent {
	> .child {
    	color: pink;
    }
}

// 상위선택자 참조 '&'
.btn {
	&.active { // ---> .btn.active {}
    	color: red;
    }
    &:nth-child(2) { // ---> .btn:nth-child(2)
    	color: green;
    }
    &-on { // ---> .btn-on
    font-size: 16px;
    }
    &-off { // ---> .btn-off
    font-size: 12px;
    }
 }

✏️ 중첩 속성

.box {
	margin: {
    	top: 20px;
        bottom: 30px;
        left: 40px;
        right: 50px;
    }
}

동일한 네임스페이스를 가진 경우 중첩 구문을 활용하여 작성 가능.

✏️ 변수

$max: 500px; // 전역변수
div {
	width: $max;
    height: $max;
    span {
	    $min: 100px; // 해당 영역에서만 사용 가능한 변수
    	width: $min;
        height: $min;
    }
    $max: 800px; // ---> 변수의 재할당 가능
}

✏️ 연산

1. +, -, *, ( / ), % 기본적인 산술연산 가능.
나누기 연산의 경우 () 소괄호안에 작성하거나, 변수를 나누는 형태로 작성해야한다. (font-size, line-height 문법과 구분짓기 위함)
2. calc()

div {
	position: absolute;
	top: calc(100% - 300px);
}

%와 px의 연산을 가능하게 해준다.

✏️ @mixin & @include

반복적으로 사용하는 속성을 @minxin 키워드를 통해 저장하여 사용한다.

@mixin center { // 기본적인 mixin의 형태
	display: flex;
    justify-content: center;
    align-items: center;
}

@mixin box($size) { // 인수를 활용한 경우
	width: $size;
    height: 300px;
}

.container {
	@include center;
    .item {
    	@include box(100px);
    }
}

@mixin은 @include 키워드로 사용하고, 인수를 지정하여 원하는 값으로 수정이 가능하다.

// 인수의 값을 고정하는 경우
@mixin basicFont($fs: 14px) {
	font-size: $fs;
    font-weight: bold;
}
.info {
	.title {
    	@include basicFont(20px); // 고정값과 별개로 직접 지정도 가능
        color: red;
    }
    .content {
    	@include basicFont; // 인수의 값이 고정되어있기때문에 별도로 작성하지 않아도 됨.
        color: #333;
    }
}

인수의 값을 고정하는 경우 수정이 필요한 경우에만 값을 입력하면 되기때문에 편리하다!

// 인수가 두가지 이상인 경우
@mixin box($size: 100px, $color) {
	width: $size;
    height: $size;
    background-color: $color;
}

.box {
	@include box($color: pink);
    @include box(pink); // ---> ERROR
    .item {
    	@include box(50px, red);
    }
}

인수가 두가지 이상인 경우 인수의 이름을 명시하고 값을 입력해야 한다. (미입력시 컴파일 에러)

✏️ SCSS를 CSS로 컴파일 해주는 사이트

https://www.sassmeister.com/