1. Sass

• pre process 웹 브라우저에서 해석되기전에 css로 변환되는 과정
• Sass는 pre process(전처리기)이고 사용하면 매우 효과적으로 복잡한 애플리케이션 스타일을 관리할 수 있다.
• Sass는툴을 설치하지않아도 사용할 수 있는 온라인 서비스이다.
• 표준 Sass는 dart-sass이다. 그리고 libSass 는 이제 지원되지 않는다.
• 모든 CSS버전과 완벽하게 호환한다.

🏷️ Sass의 문법 → SCSS 문법과 Sass 문법

✔️ SCSS 문법 → 콧수염문법, 중괄호문법

→ CSS구문과 문제없이 호환되기 때문에 많이 사용한다.

✔️ Sass 문법 → 인벤테이션 문법, 들여쓰기 문법, 세미콜론 없음

→ SCSS에 비해 상대적으로 CSS와 호환되지 않아 사용율이 적지만 SCSS파일과 호환 가능하므로 필요한 경우 이 구문을 사용한다.

🏷️ 설치 방법 꼭 확인

• ✔️ npm i sass → dart-Sass
• ✔️ npm i node-sass → libSass

📌 npx sass scss:css --style=compressed

• 배포모드일 때 용량때문에 압축시키는 것
• 명령어를 뒤에 적어도 상관없다.

📌 npx sass scss:css --no-source-map

• 소스맵 만들기 싫을 때 사용하는 명령어
• /*# sourceMappingURL=style.css.map */ 안뜨면 소스맵이 안만들어진 것이다.

📌 npx sass scss:css —watch

• 계속 css를 추적한다.
• live-server가 돌아가는 느낌이지만 scss를 css로 실시간으로 컴파일 해주는 것이다.

🏷️ 단축키

• 🔻 등록
• package.json 파일의 scripts 부분에 “key” : “value” 로 등록
• 🔻 사용
• npm run key값

📌 rimraf

• 여러개를 지우거나 경로가 길 때 쉽게 삭제시켜주는 패키지
• rimraf css build → css폴더도 지우고 build 폴더도 지워라

📌 npm-run-all

• npm 명령을 동시다발적으로 실행시키고 싶을 때 쓰는 패키지
• npm-s 순차적 진행
• npm-p 병렬적 진행

---

2. Sass 문법 ①

📌 주석

• /**/ 컴파일된 CSS 파일에 남아 있다.
• // 컴파일 결과에 출력되지 않는다.

📌 변수 선언

• $변수이름 : 값
• 변수 이름은 언더스코어(_) 또는 하이픈(-)을 사용할 수 있는데 둘은 동일한 변수이다.
• menu-list = menu_list
• 전역 변수(글로벌변수) → 최상위 수준에 선언된 변수 → 로컬 범우 안에서 글로벌 변수에 값을 설정해야 할 경우 !global 플래그 사용
  
• 지역 변수(로컬 변수) → 블록 내부에 선언되어 블록 안에서만 접근 가능하다. → 지역 변수는 전역 변수와 동일한 이름으로 선언할 수 있다.
  

📌 중첩 및 상위선택자

• &:하위요소
• &는 상위선택자를 가리키는 특별한 선택자
• 이 선택자를 사용하면 보다 복잡한 방식으로 상위 선택자를 재사용할 수 있다.
• 중첩은 한번만 하는게 가독성이 높다.

.menu {
  list-style: none;
  padding-left: 0;

  &__item {
    margin-top: 16px;
  }
}

• 상위 선택자는 BEM 을 사용하면 고도로 구조화 된 클래스 이름을 사용할 때 유용하다

.Menu{
	//.menu__list
	&__list{
		background : #fff;
	}
}

📌 모듈

• @use 에 의해 불러와진 스타일 = 모듈
• 독립적으로 묶인 작은 코드 조각
• 애플리케이션 스타일을 유지 관리하기 쉽게 만들어주는 매우 효과적인 방법
• @use
• @use “불러올 폴더/파일”
• 다른 Sass 파일에서 믹스인, 함수, 변수 등을 불러와 결합할 때 사용한다.

📌 모듈 불러오기

• 모듈 사용하기(네임스페이스 붙이기)
• 파일 이름을 네임스페이스로 가지며 점(.) 문법을 사용해 모듈의 변수 등에 접근할 수 있다.

→ 위치한파일.$변수이름

@use "./themes/themes";
@use "./utils/mixins";

body {
  background: themes.$purple;
  color: mixins.$purple;
}

• 자주 쓰는 건 별칭을 붙여서 사용할 수 있다. → as 별칭 → 불러올때는 별칭.$변수이름 → 별칭이 *일 경우 네임스페이스 없이 접근 가능하다.
  

@use "./themes/themes" as *;
@use "./utils/mixins" as mix;

body {
  background: $purple;
  color: mix.$purple;
}

📌 partial

• 파일 이름 앞에 언더스코어(_)를 붙이면 CSS 파일로 변환하지 않는다.
• 모듈의 모든 것은 공개이지만 하이픈(-) 또는 언더스코더(_)가 붙은 경우 비공개가 된다. → 비공개는 오직 해당 멤버를 정의한 파일에서만 접근 가능하고 외부에서는 접근이 불가능하다.
  

칙

📌 모듈 내보내기

• 관심사 별 엔트리 파일을 만들어 관리하는 것이 효과적입니다.
• @forward -> Sass파일의 모듈을 불러와 다시 내보내준다.

🔻 sass/modules/_index.scss

🔻 common.scss

@forward 'config';
@forward 'base';
@forward 'colors';
@forward 'layout';
@forward 'typography';
@forward 'spacing';

@use 'modules' as *;

.container {
  margin-top: $spacing-2;
  color: $primary-500;
}

---

3. Sass 문법 ②

📌 믹스인

• 재사용 할 수 있어 유용하다.
• 믹스인 내부에 다른 믹스인을 호출할 수도 있다.

@mixin flexbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

ul {
  @include resetList;
  @include flexbox;
  background: pink;
}

📌 믹스인 확장

• 매개변수(인자) 및 옵션 인자(기본값) 설정

@mixin flexbox($fd: row, $jc: flex-start) {
  display: flex;
  flex-flow: $fd nowrap;
  justify-content: $jc;
  align-items: center;
}

ul {
  @include resetList;
  @include flexbox($fd: space-between); 
  @include autoMargin;
  width: 500px;
  background: pink;
}

📌 확장 / 상속

• 선택자의 이름 앞에 %를 사용해 선언한 플레이스홀더 클래스는 스타일을 확장할 때만 사용된다.
• 스타일 집합을 공유할 때는 @extend 를 사용한다.
• 프로젝트 할 때 가급적이면 쓰지 말 것!
• 선택자 우선순위에 영향을 끼친다.

%a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

@mixin makeA11yHidden($selector) {
	#{$selector} {
		@extend %a11yHidden;
	}
}

📌 연산자

• 산술 연산자( +, - , *, % ) 및 수학 함수(math,div() , calc() …) 등
• calc() → 계산식
  
• math.div(a, b) → a 나누기 b 계산식 → a와 b가 공유하는 모든 단위는 취소된다. → css에서는 / 기호는 구분 기호로 사용되므로 math.div()를 사용해야 한다.
  

---

4. 회고

주말에 미리 예습하고 오길 잘했다. 강의를 안듣고 왔으면 오늘 수업 하나도 못알아들을 뻔했다.
강의를 벗어나는 부분은 역시나 못알아들었다. 강사님이 질문에 대한 답변을 해주셨는데도 못알아들었다ㅠㅠㅠ 또 나만 못알아들었지ㅠㅠㅠㅠ 이제 이틀동안 Sass 로 미니 프로젝트를 하는데 잘 할수있어야할텐데 걱정이다

폭염때문에 집이 너무 더워서 집중을 못한 것도 있었다. 결국 참고 참다가 에어컨을 틀었는데 이번달 전기세 폭탄맞을 것 같다. 적당히 더워야지... 살려주세요...