[SCSS] 기초 정리 / Sass

Sass: Sass Basics

SCSS를 배우는 것은 Sass와 동일

컴파일 > Sass문법을 CSS로 변환해줌

parcel-bundler패키지를 통해 scss파일을 css파일로 변환해서 동작시킴

 

- SCSS > CSS 변환해주는 사이트

SassMeister | The Sass Playground!

 

- & : 상위 선택자 참조

 

- 중첩된 속성 : 네임 스페이스가 동일

.box {
	font: {
    	weight: bold;
        size: 10px;
        family: sans-serif;
    };
}

 

- 변수 (Variables) : 유효범위 가짐

$size: 100px;

 

- / 나누기 연산자는 () 안에서 계산하기 or 변수 이용 or 다른 연산자와 함께 사용

- calc() 사용하면 다른 단위의 산술연산도 가능 > calc(100% - 200px) 같은 계산도 가능

 

- 코드 재활용

@mixin center {
	display: flex;
    justify-content: center;
    align-items: center;
}

.box {
	@include center;
}

 

- @for 반복문

@for $i from 1 through 10 {
	.box:nth-child(#{$i}) {
    	width: 100px * $i
    }
}

 

- 함수

@function ratio($size, $ratio) {
	@return $size * $ratio
}

 

* 리팩토링 Refactoring : 실제 결과는 바뀌지 않고 코드만 변경되는 것

 

- @each

$list: red, orange, yellow;

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