📖 오늘 학습 뽀인트!

1. SCSS

1) scss파일 네이밍
2) Nesting
3) 변수 생성
4) Mixin
5) Extend
6) 반복문
7) 보간법

SCSS

🕵️‍♀️SCSS란?
SCSS는 CSS전처리기 종류 중 하나이다. 유지보수가 어려운 CSS 때문에 사용한다고 볼 수 있다. SCSS의 variable, nesting, mixin, import, extend 등의 기능들이 유지보수를 돕는다. 유명한 전처리기로는 오늘 학습한 SCSS, LESS, Stylus 가 있다.

1) scss파일 네이밍

파일 네이밍 방법에는 크게 두 가지가 있다.

---

✍첫 번째 방법: style.scss
style.scss 파일은 컴파일러를 통해 style.css이 만들어진다.
✍두 번째 방법 : _header.scss
파일명 앞에 "_"를 사용할 경우, 컴파일러를 통해 _header.css가 만들어지지 않는다. 레이아웃 별로 나눠 scss를 저장한 다음 style.scss 파일 안에 @import "header"; 으로 가져올 수 있다. 가져와진 파일들은 컴파일러가 하나의 style.css로 만들어준다.

---

🔧 "파일명이랑 @import 전부 잘 작성했는데 왜 style.css가 생성 안 되지?" scss를 배운지 하루 지나서 실제로 내가 뱉은 말이다. 원인은 VSC Sass extension 이 실행되지 않았기 때문이다.
사진에 Watch Sass 를 눌러 extension을 실행시키고 사용하도록 하자...

---

🔧 .scss에서 문법적으로는 문제 없으나, 어딘가 잘 못 작성한 부분이 있다면 오류 없이 컴파일러가 제대로 동작하지 않아 style.css에 style이 작성되지 않는다. 다행이 잘 못 작성한 반복문 하나 지워 해결되었다.

2) Nesting

// scss 
div {
	background : #C39BD3;
	p {
		font-size: 10px;
	}
    a{
        text-decoration: none;
    }
}

// CSS
div {
  background: #C39BD3;
}
div p {
  font-size: 10px;
}
div a {
  text-decoration: none;
}

위에 sass로 작성한 소스코드는 아래 css처럼 컴파일되어 만들어진다.
그렇다면 "왜 netsting을 사용할까❓" 그건 바로 부모 선택자를 반복 선언하지 않아 코드 반복이 줄어든다는 장점이 있기 때문이다. 그러면 "장점만 있을까❓" 아니다 HTML에서 마크업할 때 부모 자식이 많다면 코드가 엄청 늘어난다.
🔧 코드가 늘어나는 단점을 보완할 수 있는 방법은 두 가지다.
첫 번째, scss 작성 할 때 밖으로 빼서 작성. 위에 예시 코드에서는 a를 div 태그 밖으로 빼서 작성할 수 있겠다.
두 번째, @at-root 사용. 위에 예시 코드에서는 @at-root a로 작성할 수 있겠다.

---

//Scss
.add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

/*CSS*/
.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

위 소스코드는 css 속성의 Netsting이다.

---

//Scss
.box {
	&:focus{} // 가상선택자
	&:hover{}
  &:active{}
	&:first-child{} 
  &:nth-child(2){}
	&::after{} // 가상요소
	&::before{} 
}

/*CSS*/
.box:focus{} /* 가상선택자 */
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{} /* 가상요소 */
.box::before{}

&는 상위에 있는 부모선택자를 가리킨다. &을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있다.

---

✍ 정리하자면 중첩의 종류는 선택자 중첩, 속성 중첩이 있고 중첩 방법은 {} 안에 적거나 &를 사용한다.

3) 변수 생성

문법은 다른지만, 다른 프로그래밍 언어처럼 변수 생성이 가능하다.
여러번 반복되는 값을 변수로 지정하여 관리하는 것이 좋다.

// 변수 선언 방식.
$bgColor : #FFF
// 변수 사용 방식.
background-color: $bgColor;

4) Mixin

🕵️‍♀️Mixin이란?
코드를 재사용하여 코드 반복을 줄이기 위한 기능이다.

//생성
@mixin name($width){
	width:$width;
} 
//사용
@include name(100px)  

프로그래밍 언어 함수와 비슷한 느낌이라고 생각한다. 코드 재활용을 위해 연관있는 스타일별로 작성하는 것이 좋다. 위 예제에서는 name을 mixin으로 선언하고 아래 name을 include를 사용해서 호출했다.

@mixin pri-button_($width, $height, $radius, $color: red){
	width: $width;
    height: $height;
    border-radius: $radius;
    background-color: $color;
}
// 값 비우기
.btn__ {
    @include pri-button_(100px, null, 20px)
}
// 중앙값 주지 않기
.btn__ {
    @include pri-button_(100px, $radius:20px)
}

위 예제의 $color: red 매개변수 처럼 기본값을 줄 수도 있고,
(100px, null, 20px) null로 값을 전달하지 않을 수도 있다.

5) Extend

🕵️‍♀️Extend이란?
mixin과 비슷한 역할을 하는 기능이다. 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용한다.
extend를 사용하는 방법은 두 가지가 있다.
✍ 첫 번째,

// scss
div{
	color: red;
    width: 100px;
}
p{
	@extend div;
    font-size:10px
}
// css
div, p {
  color: red;
  width: 100px;
}
p {
  font-size: 10px;
}

✍ 두 번째, % 사용.

// scss
%div{
	color: red;
    width: 100px;
}
p{
	@extend %div;
    font-size:10px
}
// css
p {
  color: red;
  width: 100px;
}
p {
  font-size: 10px;
}

두 방법의 차이점은 %를 사용한 본인은 포함되지 않는 다는 점이다.

6) 반복문

다른 프로그래밍 언어처럼 반복문을 사용할 수 있다.

@for $name from 1 through 7 {
    .photo-box:nth-child(#{$name}) {
        background-image: url("./image/ppt#{$name}.png");
    }
}

위 반복문 안에 #{$name}은 1부터 7까지 이다.

7) 보간법

@for $name from 1 through 7 {
    .photo-box:nth-child(#{$name}) {
        background-image: url("./image/ppt#{$name}.png");
    }
}

@for $name from 1 through 7 {
    .photo-box:nth-child($name) {
        background-image: url("./image/ppt$name.png");
    }
}

위 예제는 보간법을 사용한 예제이고, 아래 예제는 보간법을 사용하지 않은 예제다. "두 예제의 차이는 무엇이고 결과는 어떻게 다를까❓"
차이는 name 변수를 사용할 때에 있다. 자세히 보면 위 예제는 #{$name}이고 아래 예제는 ${name}이다.
#{$name}은 보간법을 사용한 변수다. 코드에 변수 값을 넣을 때 사용한다. 위 예제 결과는 1에서 7까지 출력되고 아래 예제 결과는 "name"이라는 문자가 7번 출력된다.
JavaScript에서 템플릿 리터럴에서 변수명과 문자열을 함께 사용하는 것과 같은 의미이다.

//JS 백틱
`내이름은 ${name}` 
//SCSS 문자 보간
내이름은 #{$name}