CSS 전처리기 알아보기 (SASS, SCSS)

css 전처리기는 여러 가지 방식으로 CSS 코드를 작성하고 관리하는 데 도움을 주는 도구입니다. 이러한 전처리기는 변수, 믹스인, 중첩 규칙 등과 같은 기능을 제공하여 코드의 재사용성과 유지 보수성을 향상시킵니다. 대표적인 CSS 전처리기로는 Sass, Less, Stylus 등이 있습니다. (AI가 생성했어요!)

SCSS (Sassy CSS)

SCSS는 원래 SASS(Syntactically Awesome Style Sheets)로 개발됐다가 새롭게 개편돼 SCSS라는 이름으로 공개됐다.

SASS보다 더 좋은 버전이라고 생각하면 될 것 같다

+ sass와 scss 차이

SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만 SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분한다

SASS, SCSS는 변수, 가져오기, 중첩, 확장, 재사용, 연산, 조건문, 반복문 등 프로그래밍 언어에 있을 법한 기능을 제공한다.

변수

$font-size: 16px;

div {
	font-size: $font-size;
}

가져오기

@import "_button";

중첩

card {
	border: 1px solid gray;
	padding: 16px;
	.card-header{
		padding: 8px;
		background-color: lightgray;
	}
}

확장

.btn {
	width: 100px;
	height: 50px;
}

.btn-danger {
	@extend .btn;
	background-color: red;
}

재사용

@mixin boredred(){
	border: 1px solid #ddd;
}

h1{
	@include bordered();
}

@mixin : 재사용할 스타일 정의하기

@include : 정의된 스타일 가져오기

연산, 조건문, 반복문... 등등

https://sass-lang.com/documentation/ 참고

참고자료 : [도서] 아는만큼 보이는 프런트엔드 개발