배운점

💭 scss란?

css를 프로그래밍 언어처럼 만듦.
scss를 컴파일해서 css처럼 되게 함.

scss사용시 gulp 파일 만들고 세팅 해야함.
src 가 바라보는 파일에서 일어나는 모든일이
css로 컴파일 되는 됨.

1.variables

_variables.scss 이처럼 파일명 앞에 밑줄을 넣으면
css로 컴파일 안됨, 오직 scss를 위한 파일.

지정 : ${};
사용 : scss파일에 @import "파일명.scss" ;

2.nesting

중첩, 코드를 좀 더 직관적으로 작성가능

기존

.box h2{
}


.box button{
}

중첩 , 이 처럼 부모괄호 안에 넣으면 됨.

.box{
 h2{
   color:blue;
 }
 button{
 }
}

중첩안에 또 중첩가능 , 안에 넣을시 '&' 사용함.

.box{
 &:hover{
 
 }
 h2{
   color:blue;
 }
 button{
 }
}

3.mixins

• mixin은 인자를 가짐.
  전달 받은 인자를 사용하여
  조건문 @if, @else를 사용할 수 있음.

• 여러가지 요소에 한번에 스타일 적용하고 싶을때
  지정 : @mixin 키워드
  사용 : @include 키워드

공식문서
설명글

4.extends

코드를 재사용 하고 싶을때 사용
지정 : '%'
사용 : @extend 키워드

5.responsive mixin

지정 : @content 키워드
사용 : @include 키워드 (@mixin랑 같음)

minxins 정말 다양함

그 중 특히 유용한 것
bourbon : Mixin 을 위한 라이브러리
mixin media query : 기기별 반응형을 위한
animate 애니매이션 효과를 위한

느낀점

css 기본 문법과 flex, grid를 사용한 레이아웃 공부만 하다가,
scss를 처음으로 접해봤는데 처음이라 많이 낯설지만
확실히 css보다 더 다양하게 편리하게 사용가능 하다고 느낌.

인강을 통하여 배운 것을 복습하는 포스팅이므로 잘못된 정보는 예쁜말로 피드백 주시면 언제나 감사합니다.