1.Sass 데이터 타입 및 내장 함수

🔗참고자료

📌 Sass의 data type

• string 문자
• number 숫자
• boolean 불린
• list 배열
• map 객체
• colors 색상
• function 함수
• null

📌 Sass의 내장 함수

• rgb 색상 모듈
• list 배열 모듈

$sprites: Book, Board, News, Favorite, Twitter;

• map 객체 모듈

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

• math 숫자 계산 모듈
• string 문자 모듈
• meta 다른 모듈 평가 모듈
• selecter 선택자 평가 모듈

📌 내장 함수 모듈 호출 및 사용방법

@use 'sass:내장 함수'; // 모듈 호출

{네임스페이스}.함수() // 모듈 사용
ex) list.nth($fontSize, 3)

---

2. webCafe main 영역

• map.has-key

key 값을 가지고 와주는 함수

• map.get

value 값을 가지고 와주는 함수

.appFooter{
  .address{
    &__telephone{}

    &__link{}
  }
}

//컴파일 결과
.appFooter
.appFooter .address
.appFooter .address__telephone
.appFooter .address__link

------------------------------------------

.appFooter{
  @at-root .address{
    &__telephone{}

    &__link{}
  }
}

//컴파일 결과
.appFooter
.address
.address__telephone
.address__link

• @at-root

  • 표현식을 잠깐 root 레벨로 보낼 수 있다.

• @debug

  • 컴파일 시 디버그 결과를 보여준다.

• $accent-opacity-color: rgba($khaki, 0.85);

  → rgb함수 안에 변수를 담는 것은 css에서는 안되는 문법

  → rgb() 함수는 color 내장 함수 모듈

📌 @each

• 주어진 목록 내에서 반복시킬 때 사용한다.
• list와 map 변수와 함께 사용하면 좋다.
• 주어진 목록 내에서 반복시킬 때 사용방법 → @each {현재 요소를 가리키는 이름} in {변수 이름}
  

✔️ map 모듈안에서 반복하는 구문

$colors: (
  "Book": var.$green,
  "News": var.$yellow,
  "Board": var.$brown,
  "Favorite": var.$orange,
  "Twitter": var.$blue,
);

//$section = $colors의 key
//$color = $colors의 value
@each $section, $color in $colors {
  .accent#{$section} {
    color: $color;
  }
}
//.accent$colors의key라는 선택자에 color: $color의 value값을 순서대로 담아줘

✔️ list 모듈안에서 반복하는 구문

// sprites라는 변수에 리스트를 담아놨다.
$sprites: Book, Board, News, Favorite, Twitter;
$x: 0;
$y: 0;

//$sprite = $sprites의 list 값
 @each $sprite in $sprites {

//상위호환선택자+$sprites의 list값의 이름을 가진 선택자는 
//배경 위치가 $x, $y값을 가진다.
//한번 돌때마다 $y는 -115px 값을 가진다.
   &#{$sprite} {
     background-position: $x $y;
   }
   $y: $y - 115px;
 }

🏷️ 자기자신이 있는 폴더를 호출하면 자기자신도 계속 불러오게 되서 무한루프가 되서 오류가 발생한다. 그래서 같은 폴더안에 있는것은 폴더가 아닌 파일자체를 @use 해오는 게 좋다.

⭐ 벡터 이미지는 크기가 아무리 커져도 이미지가 깨지지 않기 때문에 어떤 값을 줘도 문제가 생기지 않는다. 그래서 width: 100%, max-width: 100% 둘 다 사용해도 문제가 없지만 max-width값은 권장되지 않는다. 하지만, 레스터 이미지(비트맵)는 자기 크기보다 커지게 되면 픽셀이 깨지기 때문에 너 자신의 크기까지만 커지라고 제한을 줘야한다. 그래서 width값보다는 max-width값을 주는게 효율적이다. → 결국은 해상도 이슈 때문!

---

3. 회고

어제 개인 프로젝트를 진행하면서 어느정도 개념을 잡아두어서 오늘의 수업은 많이 어렵지 않았다. 하지만 중간중간 함수와 반복문을 배우는데 자바스크립트 기초가 부족해서 그런지 애매하게 이해가 갔다. 복습하면서 천천히 해보니까 이해가 가기 시작했다. 그래도 혼자 함수 짜보라 그러면 아직은 못하겠다....ㅎㅎㅎ

짧고 굵었던 Sass의 수업은 오늘 끝났다. 다 배우고 느낀 점은 정말 잘 활용한다면 코드의 재활용, 간결화 등 장점이 정말 많아보였다. 오늘 배운 내장함수들도 잘 사용할 줄 안다면 다시는 CSS만으로 코딩하는 거는 안할듯 싶다. 하지만 3일밖에 안배워서 아직은 Only CSS가 제일 편하다. 내일은 TailwindCSS를 하루 배우는데 완전 발만 담구는 수준으로 배우는 거라 이게 맞나? 싶긴하다..😭😭 더 많이 배우고싶어요ㅠㅠ

그리고 오늘 드디어 HTML/CSS 프로젝트 팀이 발표되었다. 2분은 잘 모르는 동기분이였는데 1분은 라운지에서도 많이 보이던 이름이라 나 혼자만의 친근감을 느꼈다. 그리고 잘하기로 소문난 동기분이라 프로젝트에 대한 걱정은 한 시름 놨다ㅎㅎㅎㅎㅎㅎㅎㅎ 모르는거 있으면 많이많이 물어봐야겠다. 동기분들한테 피해가 되지 않도록 프로젝트 정말 열심히 해야지!!