패스트캠퍼스 메가바이트스쿨 Day 48 (10주차 금요일) - Sass

Sass

Today Topic

✅ Sass 설치
✅ $변수선언
✅ nesting
✅ extend
✅ mixin
✅ use

---

1. Sass 설치

• live sass compiler 설치 (버전 체크 필요)
• cra에서 npm i sass 진행
• 파일명.css -> 파일명.scss로 변환하면 css파일로 컴파일이 됨(compiler가 자동으로 해줌)
• 에러 확인은 vscode의 출력 부분 체크가 필요함

---

2. $변수선언

$메인칼라 : #2a4cb2
$서브칼라 : #eeeeee
$기본사이즈 : 20px;
>
.background {
	background-color: $메인칼라;
    font-size : $기본사이즈;
}
>
.box {
	color: $서브칼라;
}

• <$변수명 : 내용>을 입력하면 기본적으로 반복되는 css를 변수처럼 활용이 가능함

---

3. nesting 문법

.main-bg h4 {
	font-size: 16px;
}
.main-bg button {
	color : red;
}
>
.main-bg {
	h4 {
    	font-size: 16px;
    }
    button {
    	color: red;
    }
}

• nesting 문법은 관련있는 class들을 묶을 때 활용이 가능함
• nesting은 두 개 이상 중첩을 하지 않는다. 굉장히 복잡해질 수 있음

---

4. extend 문법

.btn-green {
	width:100px;
    height:100px;
    padding:20px;
    color:green;
}
.btn-red {
	width:100px;
    height:100px;
    padding:20px;
    color:red;
}

• 위와 같이 중복이 발생하는 코드들을 클래스 만들듯이 상속을 시켜줄 수 있음.

%btn {
	width:100px;
    height:100px;
    padding:20px;
}
.btn-green {
	@extend %btn;
    color:green;
}
.btn-red {
	@extend %btn;
    color:red;
}

• 위의 코드처럼 반복되는 부분들을 따로 임시클래스를 만들어서 상속시킬 수 있음
• 여기서 임시클래스라고 하는 이유는 임시클래스는 css로 변환되지 않는다.

---

5. mixin

h2 {
	font-size:30px;
    letter-spacing: -1px;
}
h3 {
	font-size:20px;
    letter-spacing: -1px;
}
h4 {
	font-size:10px;
    letter-spacing: -1px;
}

• 위와 같이 비슷한 형태로 반복되는 코드들을 어떻게 줄일 수 있을까?
• mixin을 이용하면 함수형으로 css를 작성할 수 있게 된다.

@mixin 폰트스타일(){
	font-size:30px;
    letter-spacing: -1px;
}

h2 {
	@include @폰트스타일()
}
h3 {
	@include @폰트스타일()
}

• 위의 처럼 mixin을 통해 작명()이라는 것을 입력하면 이런식으로 작성할 수 있음
• 그러나 위의 처럼 하면 h2와 h3 모두 똑같은 스타일을 갖게 된다.
• 이럴 때 업그레이드를 통해서 작성할 수 있음

@mixin 폰트스타일($구멍){
	font-size:$구멍;
    letter-spacing: -1px;
}

h2 {
	@include 폰트스타일(40px)
}
h3 {
	@include 폰트스타일(30px)
}

• 위 처럼 인자로 값을 전달해주면 긴 코드를 가변적으로 활용할 수 있게 된다.
• 인자로는 몇 개든 값을 전달해줄 수 있음.
• 뿐만 아니라 값과 더불어 원하는 스타일 자체도 변수화가 가능하다 아래처럼 말이다.

@mixin 폰트스타일($구멍, $구멍2){
	font-size:$구멍;
    #{ 구멍2 }: -1px;
}
h2 {
	@include 폰트스타일(40px, letter-spacing)
}

---

6. use 문법 (다른 파일에 있는 내용을 가져오고 싶을 때)

@use '_reset.scss';

@mixin 폰트스타일($구멍, $구멍2){
	font-size:$구멍;
    #{ 구멍2 }: -1px;
}
h2 {
	@include 폰트스타일(40px, letter-spacing)
    color:reset.$메인칼라;
    
    //다른파일의 믹스인을 불러 올 경우에는 @include reset.믹스인이름()으로 설정 가능
}

• reset.scss에 있던거 가져와달라는 것은 use이다.
• 컴파일하기 싫은 파일은 _파일명.scss로 작명하게 되면 컴파일러가 자동으로 변환을 안한다.

body {
	margin:0;
}
div {
	box-sizing:border-box;
}
$main_color : brown;

• 위의 코드는 '_reset.css'에 있는 것. mixin, $변수 이런 것도 다 가져올 수 있음.