TIL Day-33

SCSS

SCSS 데이터

• Numbers: 단위에 상관없이 숫자 데이터로 취급
• Strings: 따옴표 유무에 상관없이 문자 데이터로 취급
• Colors: 색상으로 표현할 수 있는 데이터
• Booleans: true, false
• Null: null은 css로 컴파일되지 않음
• Lists: JS의 배열과 유사
  • (1, 2, 3)
  • 1, 2, 3
  • 1 2 3
• Maps: JS의 객체와 유사
  • (key: value)
  • (a: apple, b: banana, c: cherry)

SCSS 연산자

• 산술 연산자
• +
• -
• *
• /: 단축 속성의 구분선과 중복
  • 소괄호, (10px / 2)
  • 변수에 저장된 값, $a: 10px; ($a / 2)
  • 다른 연산자와 함께 나누기 연산자 사용, 10px / 2 + 1px
• %
• 연산자 단위가 다른 경우
  • css의 calc함수 사용

• 비교 연산자
• ==, !=
• <, >
• <=, >=

• 논리 연산자
• and
• or
• not

SCSS 재활용

• @mixin 사용하여 스타일 정의
  • @mixin 내부에 또다른 @mixin 사용 가능
  • @mixin에서 함수처럼 매개변수를 넣을 수 있고 ...전개연산자처럼 사용 가능
• @include 사용하여 @mixin이름을 적고 재활용
  • @include 내부에 스타일 블럭을 추가할 수 있고 @mixin에 @content을 명시하여 사용